حدث onfocusin
مثال
قم بتنفيذ JavaScript عندما يكون حقل الإدخال على وشك التركيز:
<input type="text"
onfocusin="myFunction()">
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
يحدث حدث onfocusin عندما يكون عنصر على وشك الحصول على التركيز.
نصيحة: حدث onfocusin مشابه لحدث onfocus . الاختلاف الرئيسي هو أن حدث onfocus لا ينفجر. لذلك ، إذا كنت تريد معرفة ما إذا كان عنصر ما أو طفله يحصل على التركيز ، فيجب عليك استخدام حدث onfocusin.
نصيحة: حدث onfocusin هو عكس حدث onfocusout .
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الحدث بشكل كامل.
Event | |||||
---|---|---|---|---|---|
onfocusin | Yes | Yes | 52.0 | Yes | Yes |
ملاحظة: قد لا يعمل حدث onfocusin كما هو متوقع في Chrome و Safari و Opera 15+ باستخدام بنية JavaScript HTML DOM. ومع ذلك ، يجب أن تعمل كسمة HTML وباستخدام أسلوب addEventListener () (انظر أمثلة بناء الجملة أدناه).
بناء الجملة
في HTML:
<element onfocusin="myScript">
في JavaScript (قد لا يعمل كما هو متوقع في Chrome و Safari و Opera 15+):
object.onfocusin = function(){myScript};
في JavaScript ، باستخدام طريقة addEventListener ():
object.addEventListener("focusin", myScript);
ملاحظة: طريقة addEventListener () غير مدعومة في Internet Explorer 8 والإصدارات السابقة.
تفاصيل تقنية
فقاعات: | نعم |
---|---|
قابل للإلغاء: | رقم |
نوع الحدث: | التركيز |
علامات HTML المدعومة: | جميع عناصر HTML ، باستثناء: <base> و <bdo> و <br> و <head> و <html> و <iframe> و <meta> و <param> و <script> و <style> و <title> |
إصدار DOM: | أحداث المستوى 2 |
مزيد من الأمثلة
مثال
استخدام "onfocusin" مع حدث "onfocusout":
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
مثال
تفويض الحدث: تعيين معلمة 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:
<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>