input

Событие input возникает, когда пользователь изменяет содержимое поля для ввода информации.

Примеры таких полей:

• <textarea>;
• <input> с текстовым содержимым (атрибуты type="text" или type="number");
• <input> с нетекстовым содержимым (атрибуты type="file" или type="image");
• <input> в виде чекбокса (type="checkbox") или радиокнопки (type="radio");
• <select>.

Событие input возникает, когда DOM-дерево обновляется или вот-вот обновится. Если пользователь вставит текст из буфера обмена, то событие input возникнет один раз. Если же пользователь печатает текст, то событие input возникает после добавления и удаления каждого символа.

        
          
          <label>  Введите текст:  <input type="text" id="textField"></label><label>  При каждом изменении возникает событие <code>input</code>:  <textarea disabled id="textResult"></textarea></label><script>  var inputTextField = document.getElementById('textField')  var outputTextField = document.getElementById('textResult')  inputTextField.oninput = function() {      outputTextField.value = inputTextField.value  }</script>
          <label>
  Введите текст:
  <input type="text" id="textField">
</label>

<label>
  При каждом изменении возникает событие <code>input</code>:
  <textarea disabled id="textResult"></textarea>
</label>

<script>
  var inputTextField = document.getElementById('textField')
  var outputTextField = document.getElementById('textResult')

  inputTextField.oninput = function() {
      outputTextField.value = inputTextField.value
  }
</script>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          const textInput = document.querySelector('input[type=text]')function callback(evt) {  console.log(`Произошло событие ${evt.type}`)}textInput.addEventListener('input', callback)
          const textInput = document.querySelector('input[type=text]')

function callback(evt) {
  console.log(`Произошло событие ${evt.type}`)
}

textInput.addEventListener('input', callback)

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если ввести в текстовое поле слово «Дока» и щёлкнуть вне этого поля, в консоли будут показаны сообщения: «4 раза: Произошло событие input».

События input и change похожи — оба помогают отслеживать изменения в полях ввода.

Различие есть для текстовых полей ввода:

• input — срабатывает при каждом изменении значения в поле;
• change — срабатывает, когда изменяемый элемент теряет фокус. Например, при переходе к другому полю или клику на другую часть страницы.

Для прочих полей ввода они работают одинаково:

        
          
          <label>  Кликните:  <input type="checkbox" name="checkbox-input"></label><label>  Типы событий:  <textarea disabled name="checkbox-result"></textarea></label><script>  const checkbox = document.querySelector('[name=checkbox-input]')  const textArea = document.querySelector('[name=checkbox-result]')  function handleCheckboxChange(evt) {      textArea.value += evt.type + '; '  }  checkbox.addEventListener('input', handleCheckboxChange)  checkbox.addEventListener('change', handleCheckboxChange)</script>
          <label>
  Кликните:
  <input type="checkbox" name="checkbox-input">
</label>

<label>
  Типы событий:
  <textarea disabled name="checkbox-result"></textarea>
</label>

<script>
  const checkbox = document.querySelector('[name=checkbox-input]')
  const textArea = document.querySelector('[name=checkbox-result]')

  function handleCheckboxChange(evt) {
      textArea.value += evt.type + '; '
  }

  checkbox.addEventListener('input', handleCheckboxChange)
  checkbox.addEventListener('change', handleCheckboxChange)
</script>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Событие input не произойдёт, если:

• текст не меняется, например, при нажатиях клавиш влево ⇦, вправо ⇨, Control, Alt, Shift;
• тег <input> имеет атрибут type="button" или type="submit";
• поле изменит не пользователь, а JavaScript-код. Чтобы в этом случае получить событие input, нужны дополнительные действия. К примеру, использовать dispatchEvent().