رویداد onfocus

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

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

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

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

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

رویداد onfocus زمانی روی می دهد که فوکس به یک عنصر منتقل می شود.

رویداد onfocus اغلب در تگ های <input> و <select> و <a> استفاده می شود.

رویداد onfocus برعکس رویداد onblur می باشد.

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

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

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

Event
onfocus	بله	بله	بله	بله	بله

نحوه استفاده

در HTML:

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

در جاوااسکریپت:

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

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

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

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

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

استفاده از رویداد onfocus در کنار رویداد onblur:

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

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

true کردن پارامتر useCapture در متد addEventListener():

<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>

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

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

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

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

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

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

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