رویداد onfocusout

مثال (رویداد onfocusout)

اجرا کردن یک تابع جاوااسکریپت هنگامی که یک فیلد input در آستانه ی از دست دادن فوکس است:

در انتهای این صفحه، مثال های بیشتری آورده شده است.

تعریف و کاربرد

رویداد onfocusout هنگامی روی می دهد که یک عنصر در آستانه ی از دست دادن فوکس است.

نکته: رویداد onfocusout مشابه رویداد onblur است. اصلی ترین تفاوت آنها در این است که رویداد onblur از ویژگی bubble پشتیبانی نمی کند. اما اگر می خواهید بفهمید که آیا یک عنصر یا فرزند آن فوکس را از دست می دهند یا نه، باید از رویداد onfocusout استفاده کنید.

نکته: با اینکه مرورگر فایرفاکس از رویداد onfocusout پشتیبانی نمی کند، اما شما می توانید از پارامتر useCapture برای رویداد onblur در متد addEventListener() استفاده کنید. بدین صورت شما می توانید بفهمید که آیا فرزند یک عنصر فوکس را گرفته است یا نه.

نکته: رویداد onfocusout مخالف رویداد onfocusin می باشد.

پشتیبانی مرورگرها

Event
onfocusout	بله	بله	پشتیبانی نمی شود	بله	بله

نکته: نحوه کاربرد رویداد onfocusout در DOM ممکن است بر خلاف آنچه که از آن انتظار می رود، در مرورگرهای کروم و سفری و اپرا 15+ متفاوت باشد. اما این رویداد می تواند در متد addEventListener() مانند یک خصوصیت HTML استفاده شود.

نحوه استفاده

در HTML:

<element onfocusout="myScript">امتحان کنید

در جاوااسکریپت(ممکن است آن طور که از آن انتظار می رود در مرورگر های کروم و سفری و اپرا 15+ کار نکند).

object.onfocusout=function(){myScript};امتحان کنید

استفاده از متد addEventListener() در جاوااسکریپت:

object.addEventListener("focusout", myScript);امتحان کنید

نکته: متد 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:

<form id="myForm">
<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(در فایرفاکس پشتیبانی نمی شود):

<form id="myForm">
<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

: نوشته شده توسط احسان عباسی; بازدید: 5043

برای درج دیدگاه، ابتدا باید وارد بیاموز شوید.

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.

مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی