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

HTML

<!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>

Result

Supported Tags

Browser Support

Desktop

9	12	1	9	10	4

Tablets / Mobile

≤37	18	9	10.1	3.2	1.0

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu