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