HTML oninput Event Attribute - HTML Form Events Attribute

The oninput event attribute in HTML fires when an element receives user input, specifically when the value of an <input> or <textarea> element is changed.

Example of HTML oninput Event Attribute

It will Execute a JavaScript when a user writes something in an <input> field.

index.html

Example: HTML

 <input type="text" oninput="myFunction()">

Output should be:

Definition and Usage of HTML oninput Event Attribute

The oninput attribute fires when an element gets user input.

The oninput attribute fires when the value of an <input> or <textarea> element is changed.

Tip: 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, while onchange occurs when the element loses focus. The other difference is that the onchange event also works on <select> elements.

Browser Support of HTML oninput Event Attribute

The numbers in the table specify the first browser version that fully supports the event attribute

Syntax of HTML oninput Event Attribute

<element oninput="script">

Attribute Values of HTML oninput Event Attribute

Value	Description
script	The script to be run on oninput

Technical Details of HTML oninput Event Attribute

Supported HTML tags:	<input type="password">, <input type="search">, <input type="text"> and <textarea>

How to Execute a JavaScript when a user writes something in an <input> field

Here Writes something in the text field to trigger a function.

index.html

Example: HTML

<!DOCTYPE html>
<html>
<body>

<p>Write something in the text field to trigger a function.</p>

<input type="text" id="myInput" oninput="myFunction()">

<p id="demo"></p>

<script>
function myFunction() {
  let x = document.getElementById("myInput").value;
  document.getElementById("demo").innerHTML = "You wrote: " + x;
}
</script>

</body>
</html>

Output should be:

html event attributes

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Form Events Attribute
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference