رویداد oninput
تعریف و استفاده
رویداد oninput وقتی که عنصر دریافت ورودی کاربر می‌کند، رخ می‌دهد.
وقتی که ارزش عنصر <input> یا <textarea> تغییر می‌کند، این رویداد رخ می‌دهد.
توضیحات:این رویداد مشابه رویداد onchange.تفاوت‌ها این است که رویداد oninput پس از تغییر ارزش عنصر بلافاصله رخ می‌دهد، در حالی که رویداد onchange پس از اینکه عنصر از تمرکز خارج می‌شود و محتوای آن تغییر می‌کند، رخ می‌دهد. یک تفاوت دیگر این است که رویداد onchange نیز برای عنصر <select> مناسب است.
مثال
مثال 1
وقتی که کاربر در زمینه‌ی <input> نوشته است، جاوااسکریپت را اجرا کنید:
<input type="text" oninput="myFunction()">
مثال 2
کمبود滑کن - چگونه می‌توانید ارزش滑کن را به صورت پویا به‌روزرسانی کنید:
<input type="range" oninput="myFunction(this.value)">
قانون‌نویسی
در HTML:
<عنصر oninput="myScript">
در جاوااسکریپت:
مورد.oninput = function(){myScript};
در جاوااسکریپت، از روش addEventListener() استفاده کنید:
مورد.addEventListener("input", myScript);
توضیحات:اینترنت اکسپلورر 8 یا نسخه‌های قدیمی‌تر آن پشتیبانی نمی‌کند مетод addEventListener().
جزئیات فنی
| بالا آمده (بوبلینگ): | پشتیبانی |
|---|---|
| قابل انصراف: | پشتیبانی نمی‌شود |
| نوع رویداد: | رویداد, 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 | پشتیبانی |
