توضیح:
این رویداد زمانی رخ می‌دهد که مقدار یک المنت input یا textarea تغییر پیدا کند.
این رویداد شبیه به رویداد onchange است. فرق آن ها با هم در این است که رویداد oninput به محض تغییر مقدار فراخوانی میشود در صورتی که onchange پس از تغییر مقدار فیلد و برداشتن فوکوس از روی فیلد فراخوانی میشود. همچنین رویداد onchange بر روی المنت select اجرا میشود.
نحوه نوشتن:
در حالت خصوصیت تگ HTML:
|
1 |
<element oninput="myScript"> |
در داخل جاوااسکریپت:
|
1 |
object.oninput = function(){myScript}; |
در قالب متد addEventListener:
|
1 |
object.addEventListener("input", myScript); |
تگ های پشتیبان کننده:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
نسخه پشتیبانی مرورگرها:
| مرورگر Chrome | مرورگر Firefox | مرورگر Edge | مرورگر Safari | مرورگر Opera |
|---|---|---|---|---|
| همگی | همگی | همگی | همگی | همگی |
حالت Bubbles:
بله
حالت Cancelable:
خیر
مثال:
|
1 2 3 4 5 6 |
<input type="range" oninput="myFunction(this.value)"> <script> function myFunction(val) { document.getElementById("demo").innerHTML = val; } </script> |
