حدث oninput
التعريف والاستخدام
يحدث حدث oninput عند الحصول على إدخال المستخدم في العنصر.
يحدث هذا الحدث عند تغيير قيمة عنصر <input> أو <textarea>.
نصيحة:هذا الحدث يشبه حدث onchange. الفرق بينه وبين oninput هو أن هذا الحدث يحدث فور تغيير قيمة العنصر، بينما onchange يحدث عند فقدان العنصر التركيز، وتغيير المحتوى. الاختلاف الآخر هو أن حدث onchange ينطبق أيضًا على العناصر <select>.
مثال
مثال 1
عندما يكتب المستخدم محتوى في حقل <input>، يتم تنفيذ JavaScript:
<input type="text" oninput="myFunction()">
مثال 2
مقياس النطاق - كيفية تحديث قيمة المقياس بشكل ديناميكي:
<input type="range" oninput="myFunction(this.value)">
النحو
في HTML:
<العنصر oninput="myScript">
في JavaScript:
الجسم.oninput = function(){myScript};
في JavaScript، استخدم طريقة addEventListener():
الجسم.addEventListener("input", myScript);
ملاحظة:Internet Explorer 8 أو الأحدث غير يدعمها طريقة addEventListener().
تفاصيل التقنية
| تدفق البث: | دعم |
|---|---|
| قابل للإلغاء: | غير مدعوم |
| نوع الحدث: | Event, 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">, <input type="time">, <input type="url">, <input type="week"> وكذلك <textarea> |
| إصدار DOM: | أحداث المستوى 3 |
دعم المتصفح
الرقم في الجدول يوضح إصدار المتصفح الأول الذي يدعم هذا الحدث بشكل كامل.
| أحداث | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| oninput | دعم | 9.0 | 4.0 | 5.0 | دعم |
