حدث onfocus
مثال
قم بتنفيذ JavaScript عندما يتم التركيز على حقل الإدخال:
<input type="text"
onfocus="myFunction()">
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
يحدث حدث onfocus عندما يتم التركيز على عنصر.
غالبًا ما يتم استخدام حدث onfocus مع <input> و <select> و <a>.
نصيحة: حدث onfocus هو عكس حدث onblur .
نصيحة: حدث onfocus مشابه لحدث onfocusin . الاختلاف الرئيسي هو أن حدث onfocus لا ينفجر. لذلك ، إذا كنت تريد معرفة ما إذا كان عنصر ما أو طفله يحصل على التركيز ، فيمكنك استخدام حدث onfocusin. ومع ذلك ، يمكنك تحقيق ذلك باستخدام معلمة useCapture الاختيارية لطريقة addEventListener () لحدث onfocus.
دعم المتصفح
| Event | |||||
|---|---|---|---|---|---|
| onfocus | Yes | Yes | Yes | Yes | Yes |
بناء الجملة
في HTML:
<element onfocus="myScript">
في JavaScript:
object.onfocus = function(){myScript};
في JavaScript ، باستخدام طريقة addEventListener ():
object.addEventListener("focus", myScript);
ملاحظة: طريقة addEventListener () غير مدعومة في Internet Explorer 8 والإصدارات السابقة.
تفاصيل تقنية
| فقاعات: | رقم |
|---|---|
| قابل للإلغاء: | رقم |
| نوع الحدث: | التركيز |
| علامات HTML المدعومة: | جميع عناصر HTML ، باستثناء: <base> و <bdo> و <br> و <head> و <html> و <iframe> و <meta> و <param> و <script> و <style> و <title> |
| إصدار DOM: | أحداث المستوى 2 |
مزيد من الأمثلة
مثال
استخدام "onfocus" مع حدث "onblur":
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
مثال
مسح حقل الإدخال عند التركيز:
<!-- When the input field gets focus, replace its current value with an
empty string -->
<input type="text" onfocus="this.value=''" value="Blabla">
مثال
تفويض الحدث: تعيين معلمة useCapture الخاصة بـ addEventListener () إلى true:
<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>
مثال
تفويض الحدث: استخدام حدث focusin (غير مدعوم من Firefox):
<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>