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);/* Если теперь ввести в текстовое поле  слово «Дока» и щёлкнуть вне этого поля,  в консоли будут показаны сообщения:  4 раза: Произошло событие input*/
          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";
• если поле изменит не пользователь, а код JS. Чтобы в этом случае получить событие input нужны дополнительные действия, например использовать dispatchEvent().