|
|
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 |
| List of Form Events Attribute | Form Events Attribute |
| What is HTML onblur Event Attribute | Form Events Attribute |
| What is HTML onchange Event Attribute | Form Events Attribute |
| What is HTML oncontextmenu Event Attribute | Form Events Attribute |
| What is HTML onfocus Event Attribute | Form Events Attribute |
| What is HTML oninput Event Attribute | Form Events Attribute |
| What is HTML oninvalid Event Attribute | Form Events Attribute |
| Example of HTML oninput Event Attribute | Form Events Attribute |
| Definition and Usage of HTML oninput Event Attribute | Form Events Attribute |
| Browser Support of HTML oninput Event Attribute | Form Events Attribute |
| Syntax of HTML oninput Event Attribute | Form Events Attribute |
| Attribute Values of HTML oninput Event Attribute | Form Events Attribute |
| Technical Details of HTML oninput Event Attribute | Form Events Attribute |
| How to Execute a JavaScript when a user writes something in an <input> field | Form Events Attribute |
Read Full: | Form Events Attribute |
Type: | Develop |
Category: | Web Tutorial |
Sub Category: | Form Events Attribute |
Uploaded by: | Admin |
Views: | 17 |
Reffered: https://www.w3schools.com/tags/ev_oninput.asp