رویداد onfocusin

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

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

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

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

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

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

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

نکته: رویداد onfocusin برعکس رویداد onfocusout می باشد.

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

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

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

نحوه استفاده

در HTML:

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

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

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

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

object.addEventListener("focusin", 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

مثال - خودتان امتحان کنید

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

استفاده از رویداد onfocusin در کنار رویداد onfocusout:

خودتان امتحان کنید »

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

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>

خودتان امتحان کنید »

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

استفاده از رویداد 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

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

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

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

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