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

HTML

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

Result

Supported Tags

Browser Support

Desktop

9	12	1	1	9	3

Tablets / Mobile

1	18	4	10.1	1	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