Событие oninput
Пример
Выполнять JavaScript, когда пользователь что-то пишет в поле <input>:
<input type="text" oninput="myFunction()">
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Событие oninput происходит, когда элемент получает пользовательский ввод.
Это событие возникает при изменении значения элемента <input> или <textarea>.
Совет: это событие похоже на событие onchange . Разница в том, что событие oninput происходит сразу после изменения значения элемента, а событие onchange происходит, когда элемент теряет фокус после изменения содержимого. Другое отличие состоит в том, что событие 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 и более ранних версиях.
Технические детали
| Пузыри: | да |
|---|---|
| Отменяемо: | Нет |
| Тип события: | Событие , Входное событие |
| Поддерживаемые HTML-теги: | <input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type="month">, <input type=" число">, <тип ввода="пароль">, <тип ввода="диапазон">, <тип ввода="поиск">, <тип ввода="тел">, <тип ввода="текст">, < input type="time">, <input type="url">, <input type="week"> и <textarea> |
| Версия ДОМ: | События уровня 3 |
Дополнительные примеры
Пример
Ползунок диапазона - как динамически обновлять значение ползунка:
<input type="range" oninput="myFunction(this.value)">