input

The input event occurs when the user alters the content of an input field.

Examples of such fields:

• <textarea>;
• <input> with textual content (attributes type="text" or type="number");
• <input> with non-textual content (attributes type="file" or type="image");
• <input> as a checkbox (type="checkbox") or radio button (type="radio");
• <select>.

The input event arises when the DOM tree is updated or about to be updated. If the user pastes text from the clipboard, the input event will occur once. If the user types text, the input event occurs after the addition and deletion of each character.

        
          
          <label>  Enter text:  <input type="text" id="textField"></label><label>  The event <code>input</code> occurs on each change:  <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>
  Enter text:
  <input type="text" id="textField">
</label>

<label>
  The event <code>input</code> occurs on each change:
  <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>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          const textInput = document.querySelector('input[type=text]')function callback(evt) {  console.log(`The event ${evt.type} occurred`)}textInput.addEventListener('input', callback)
          const textInput = document.querySelector('input[type=text]')

function callback(evt) {
  console.log(`The event ${evt.type} occurred`)
}

textInput.addEventListener('input', callback)

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

If you enter the word "WebGuide" in the text field and click outside of this field, the console will display messages: "4 times: The event input occurred".

The input and change events are similar — both help track changes in input fields.

There is a difference for text input fields:

• input — triggers on every change in the field;
• change — triggers when the changed element loses focus. For example, when moving to another field or clicking on another part of the page.

For other input fields, they work the same:

        
          
          <label>  Click:  <input type="checkbox" name="checkbox-input"></label><label>  Event types:  <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>
  Click:
  <input type="checkbox" name="checkbox-input">
</label>

<label>
  Event types:
  <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>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The input event will not occur if:

• the text does not change, for instance, when pressing the left ⇦, right ⇨, Control, Alt, Shift keys;
• the <input> tag has the attribute type="button" or type="submit";
• the field is altered not by the user, but by JavaScript code. To receive the input event in this case, additional actions are needed. For example, use dispatchEvent().