HTML oninput Event Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The oninput HTML event attribute fires when the value of an <input> or <textarea> element is changed. It is similar to the onchange event attribute, but the oninput event fires immediately after the value has changed, while the onchange event fires when the element loses focus.

The oninput event attribute can be used to perform a variety of tasks, such as:

Validating user input
Providing real-time feedback to the user
Updating other elements on the page based on the user's input

Here is an example of how to use the oninput event attribute:

<input type="text" oninput="validateInput(this)">

The validateInput() function would be responsible for validating the user's input and providing feedback to the user. For example, the function could check to make sure that the user's input is a valid email address or a phone number.

The oninput event attribute is a powerful tool that can be used to improve the user experience of your web pages.

Here are some additional details about the oninput event attribute:

It is supported by all major browsers.
It can be used on any <input> or <textarea> element, regardless of the type of input.
It is fired even if the user does not change the value of the element intentionally, such as when the user enters a character and then deletes it immediately.
It can be cancelled by calling the preventDefault() method on the event object.

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>