حدث onblur
التعريف والاستخدام
يحدث حدث onblur عند فقدان العنصر التركيز.
يستخدم حدث onblur غالبًا مع كود التحقق من النموذج (مثل، عند مغادرة المستخدم حقل النموذج).
نصيحة: حدث onblur يشبه حدث onfocusعكس ذلك.
نصيحة: حدث onblur يشبه حدث onfocusout، الفرق الرئيسي يكمن في أن حدث onblur لا ينتقل. طريقة addEventListener()م 参数 useCapture (اختياري) لتحقيق ذلك.
مثال
تُنفيذ JavaScript عند مغادرة المستخدم حقل الإدخال:
<input type="text" onblur="myFunction()">
هناك أمثلة TIY أكثر في نهاية الصفحة.
القواعد النحوية
في HTML:
<element onblur="myScript">
في JavaScript:
الشخص.onblur = function(){}myScript};
في JavaScript، استخدم طريقة addEventListener():
الشخص.addEventListener("blur", 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 |
|---|---|---|---|---|---|
| onblur | دعم | دعم | دعم | دعم | دعم |
مزيد من الأمثلة
مثال
استخدام "onblur" و "onfocus" معًا:
<input type="text" onfocus="focusFunction()" onblur="blurFunction()">
مثال
التفويض في الحدث: ضع parameter 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>
