حدث onfocusout
التعريف والاستخدام
حدث onfocusout يحدث عند فقدان العنصر للتركيز.
على الرغم من أن Firefox لا يدعم حدث onfocusout، يمكنك معرفة ما إذا كان عنصر الفرع فقد فokusout من خلال استخدام مستمع حدث onblur (باستخدام مبدأ useCapture لطريقة addEventListener()) حدث onfocusout يشبه حدث onblurالفرق الرئيسي هو أن حدث onblur لا يتصاعد. لذلك، إذا كنت تريد معرفة ما إذا كان عنصرًا أو فرعًا فقد فokusout، فعليك استخدام حدث onfocusout.
على الرغم من أن Firefox لا يدعم حدث onfocusout، يمكنك معرفة ما إذا كان عنصر الفرع فقد فokusout من خلال استخدام مستمع حدث onblur (باستخدام مبدأ useCapture لطريقة addEventListener()).
على الرغم من أن Firefox لا يدعم حدث onfocusout، يمكنك معرفة ما إذا كان عنصر الفرع فقد فokusout من خلال استخدام مستمع حدث onblur (باستخدام مبدأ useCapture لطريقة addEventListener()) تلميح: حدث onfocusinحدث onfocusout
عكس ذلك.
مثال
مثال 1
تنفيذ JavaScript عند فقدان حقل الإدخال للتركيز:
<input type="text" onfocusout="myFunction()">
في نهاية الصفحة هناك أمثلة TIY أكثر.
النحو
في HTML:< element.addEventListener("focusout",onfocusout="
">
في JavaScript، باستخدام طريقة addEventListener():في JavaScript (قد لا يعمل كما هو متوقع في Chrome، Safari و Opera 15+):.addEventListener("focusout",.onfocusout = function(){
};
في JavaScript، باستخدام طريقة addEventListener():object .addEventListener("focusout",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 |
---|---|---|---|---|---|
onfocusout | دعم | دعم | 52.0 | دعم | دعم |
ملاحظة:قد لا يعمل أحداث onfocusout كما هو متوقع في Chrome،Safari و Opera 15+ باستخدام لغة JavaScript HTML DOM. ولكن يجب استخدامه كخصائص HTML واستخدام طريقة addEventListener() (انظر مثال النحو أدناه).
مزيد من الأمثلة
مثال 2
استخدام أحداث onfocusin وonfocusout معًا:
<input type="text" onfocusin="focusFunction()" onfocusout="blurFunction()">
مثال 3
استخدام استدعاء أحداث 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>