HTML onchange Event Attribute

Description

The event attribute onchange allows you to specify whether the script fires when the element values ​​change.

This event is similar to the oninput 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 onchange="script">

Values

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

Example

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

Supported Tags

<input>, <keygen>, <select> and <textarea>

Browser Support

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