حدث 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>

جرب بنفسك