Событие oninput

Событие возникает, когда пользователь что-то вводит в текстовом поле формы (<input> или <textarea>), и меняет его значение.

Событие oninput похоже по своему действию на onchange, разница в следующем: oninput срабатывает сразу в момент изменения текста, onchange срабатывает только после потери элементом фокуса.

Синтаксис

oninput="<скрипт>"

Значения

См. скрипт.

Пример

Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>Событие oninput</title>
  <style>
   .login {
    padding: 0.5em; /* Расстояние от текста до края */
   }
   .btn-next {
    padding: 0.5em 1em; /* Расстояние от текста до края */
   }
   .btn-next {
    background-color: #0174da; /* Цвет фона */
    color: #fff; /* Цвет текста */
    border: none; /* Убираем рамку */
    border-radius: 0.4em; /* Скругление уголков */
   }
   .btn-next:disabled {
    background-color: #e5e5e5; /* Цвет фона */
    color: #737373; /* Цвет текста */
    cursor: not-allowed; /* Меняем вид курсора */
   }
  </style>
 </head>
 <body>
  <p><input class="login" placeholder="Введите логин" oninput="isEmptyValue()"></p>
  <p><button disabled class="btn-next">Продолжить</button></p>
  <script>
   var field = document.querySelector('.login'); // Поле для ввода логина
   var next = document.querySelector('.btn-next'); // Кнопка
   function isEmptyValue() {
    // Проверяем, что поле не пустое
    // Если поле пустое, то блокируем кнопку
    if(field.value != '') next.disabled = false;
    // Если поле не пустое, то кнопка разблокируется
    else next.disabled = true;
   }
  </script>
 </body>
</html>

В данном примере пока текстовое поле пустое, кнопка остаётся блокированной. Как только в поле вводится произвольный текст, кнопка становится доступной для нажатия.

Браузеры

10 79 3 11.6 3.1 6
4.4 6 12 2

См. также