HTML oninput Event Attribute

Description

The event attribute oninput allows you to set the script to fire when the item receives data input from the user.

This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, and the onchange event occurs when the element loses focus. Another difference is that the onchange event has broader browser support and works with elements such as <keygen>, <select> and more extended with the <input> element.

Syntax

<element oninput="script">

Values

  • scriptThe name of the script to use when the event has been triggered.

Example

<!DOCTYPE html> 
  <html> 
    <head>
      <title>oninput event</title> 
    </head> 
    <body> 
    <p>Type any text:</p> 
    <input type="text" name="testInput" id="testInput" oninput="testFunction()"> 
    <p id="info2"> </p> 
<script> 
function testFunction() { 
  var x = document.getElementById("testInput").value; 
  document.getElementById("info2").innerHTML="You are typing the following text: " + x; 
} 
</script> 
  </body> 
</html>

Supported Tags

<input> and <textarea>

Browser Support

Desktop
Explorer Edge Chrome Firefox Opera Safari
9YesYes210Yes
Tablets / Mobile
Android Chrome Firefox Opera Safari Samsung
YesYesYesYesYesYes