حدث oninput
مثال
نفِّذ JavaScript عندما يكتب المستخدم شيئًا ما في حقل <input>:
<input type="text" oninput="myFunction()">
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
يحدث حدث oninput عندما يحصل عنصر على مدخلات المستخدم.
يحدث هذا الحدث عندما يتم تغيير قيمة عنصر <input> أو <textarea>.
نصيحة: هذا الحدث مشابه لحدث onchange . الفرق هو أن حدث oninput يحدث فورًا بعد تغيير قيمة العنصر ، بينما يحدث التغيير عندما يفقد العنصر التركيز ، بعد تغيير المحتوى. الاختلاف الآخر هو أن حدث onchange يعمل أيضًا على عناصر <select>.
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الحدث بشكل كامل.
Event | |||||
---|---|---|---|---|---|
oninput | Yes | 9.0 | 4.0 | 5.0 | Yes |
بناء الجملة
في HTML:
<element oninput="myScript">
في JavaScript:
object.oninput = function(){myScript};
في JavaScript ، باستخدام طريقة addEventListener ():
object.addEventListener("input", myScript);
ملاحظة: طريقة addEventListener () غير مدعومة في Internet Explorer 8 والإصدارات السابقة.
تفاصيل تقنية
فقاعات: | نعم |
---|---|
قابل للإلغاء: | رقم |
نوع الحدث: | حدث ، InputEvent |
علامات HTML المدعومة: | <input type = "color"> ، <input type = "date"> ، <input type = "datetime"> ، <input type = "email"> ، <input type = "month"> ، <input type = " number "> ، <input type =" password "> ، <input type =" range "> ، <input type =" search "> ، <input type =" tel "> ، <input type =" text "> ، < نوع الإدخال = "time"> و <input type = "url"> و <input type = "week"> و <textarea> |
إصدار DOM: | أحداث المستوى 3 |
مزيد من الأمثلة
مثال
شريط تمرير النطاق - كيفية تحديث قيمة شريط التمرير ديناميكيًا:
<input type="range" oninput="myFunction(this.value)">