رویداد onfocusout
مثال (رویداد onfocusout)
اجرا کردن یک تابع جاوااسکریپت هنگامی که یک فیلد input در آستانه ی از دست دادن فوکس است:
خودتان امتحان کنید »
در انتهای این صفحه، مثال های بیشتری آورده شده است.
تعریف و کاربرد
رویداد onfocusout هنگامی روی می دهد که یک عنصر در آستانه ی از دست دادن فوکس است.
نکته: رویداد onfocusout مشابه رویداد onblur است. اصلی ترین تفاوت آنها در این است که رویداد onblur از ویژگی bubble پشتیبانی نمی کند. اما اگر می خواهید بفهمید که آیا یک عنصر یا فرزند آن فوکس را از دست می دهند یا نه، باید از رویداد onfocusout استفاده کنید.
نکته: با اینکه مرورگر فایرفاکس از رویداد onfocusout پشتیبانی نمی کند، اما شما می توانید از پارامتر useCapture برای رویداد onblur در متد addEventListener() استفاده کنید. بدین صورت شما می توانید بفهمید که آیا فرزند یک عنصر فوکس را گرفته است یا نه.
نکته: رویداد onfocusout مخالف رویداد onfocusin می باشد.
پشتیبانی مرورگرها
| Event | |||||
|---|---|---|---|---|---|
| onfocusout | بله | بله | پشتیبانی نمی شود | بله | بله |
نکته: نحوه کاربرد رویداد onfocusout در DOM ممکن است بر خلاف آنچه که از آن انتظار می رود، در مرورگرهای کروم و سفری و اپرا 15+ متفاوت باشد. اما این رویداد می تواند در متد addEventListener() مانند یک خصوصیت HTML استفاده شود.
نحوه استفاده
در HTML:
در جاوااسکریپت(ممکن است آن طور که از آن انتظار می رود در مرورگر های کروم و سفری و اپرا 15+ کار نکند).
استفاده از متد addEventListener() در جاوااسکریپت:
نکته: متد addEventListener() در Internet Explorer 8 و ورژن های قبلی آن پشتیبانی نمی شود.
جزئیات تکنیکی
| Bubbles: | بله |
|---|---|
| Cancelable: | خیر |
| Event type: | FocusEvent |
| Supported HTML tags: | ALL HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
| DOM Version: | Level 2 Events |
مثال - خودتان امتحان کنید
مثال (رویداد onfocusout)
استفاده از رویداد onfocusin در کنار رویداد onfocusout:
خودتان امتحان کنید »
مثال (رویداد onfocusout)
true کردن پارامتر useCapture در متد addEventListener() برای focus و blur:
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focus", myFocusFunction, true);
x.addEventListener("blur", myBlurFunction, true);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
خودتان امتحان کنید »
مثال (رویداد onfocusout)
استفاده از رویداد focusin(در فایرفاکس پشتیبانی نمی شود):
<input type="text" id="myInput">
</form>
<script>
var x = document.getElementById("myForm");
x.addEventListener("focusin", myFocusFunction);
x.addEventListener("focusout", myBlurFunction);
function myFocusFunction() {
document.getElementById("myInput").style.backgroundColor = "yellow";
}
function myBlurFunction() {
document.getElementById("myInput").style.backgroundColor = "";
}
</script>
خودتان امتحان کنید »
مرجع کلیه رویدادهای JavaScript
- نوشته شده توسط احسان عباسی
- بازدید: 5211
