أحداث onfocus

أحداث DOM FocusEvent

التعريف والاستخدام

تحدث أحداث onfocus عند حصول العنصر على التركيز.

أحداث onfocus تُستخدم غالبًا مع <input>، <select> و <a>.

نصيحة: أحداث onfocus تُستخدم مع حدث onblurعكس ذلك.

نصيحة: أحداث onfocus تشبه حدث onfocusin. على الرغم من أن أحد الفروق الرئيسية هو أن أحداث onfocus لا تنتقل. لذلك، إذا كنت ترغب في تحديد ما إذا كان عنصرًا أو أحد أبنائه قد حصل على التركيز، يمكنك استخدام أحداث onfocusin. ولكن يمكنك أيضًا استخدام الطريقة addEventListener()من useCapture لمعرفة كيفية القيام بذلك.

مثال

مثال 1

يتم تنفيذ JavaScript عند الحصول على تركيز حقل الإدخال:

<input type="text" onfocus="myFunction()">

تجربة شخصية

هناك أمثلة TIY أكثر في نهاية الصفحة.

النحو

في HTML:

<الهدف onfocus="myScript">

تجربة شخصية

في JavaScript:

الهدف.onfocus = function(){myScript};

تجربة شخصية

في JavaScript، يتم استخدام الطريقة addEventListener() كما يلي:

الهدف.addEventListener("focus", 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
onfocus دعم دعم دعم دعم دعم

مزيد من الأمثلة

مثال 2

استخدام "onfocus" و "onblur" أحداث معًا:

<input type="text" onfocus="focusFunction()" onblur="blurFunction()">

تجربة شخصية

مثال 3

تفريغ حقل الإدخال الحاصل على التركيز:

<!-- عند الحصول على تركيز حقل الإدخال، استبدل قيمته بمقطع فارغ -->
<input type="text" onfocus="this.value=''" value="Blabla">

تجربة شخصية

مثال 4

التفويض الحدثي: قم بتعيين استخدام التقطيع useCapture لـ addEventListener() على الحالة الصحيحة:

<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>

تجربة شخصية

مثال 5

التفويض الحدثي: استخدم حدث 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>

تجربة شخصية

أحداث DOM FocusEvent