Learn html - html tutorial - Oninput attribute in html - html examples - html programs
The oninput attribute triggers an event when a user enters the input in the input field.
The oninput attribute triggers when the value of an <input> or <textarea> element is changed.
Syntax for oninput attribute in HTML:
<element oninput="script">
Difference between HTML 4.01 and HTML 5 for oninput Attribute:
HTML 4.01
HTML 4 does not support oninput attribute.
HTML 5
The oninput attribute is new in HTML5.
Applies To:
Element
Attribute
All HTML Elements
oninput
oninput Attribute Value:
Value
Description
script
The script to be run on oninput.
Sample Coding for oninput Attribute in HTML:
Tryit<!DOCTYPE html><html><head><title>Wikitechy HTML oninput attribute</title></head><body>
Enter the text:
<input type="text" id="tutorial" oninput="onInput()"><p id= "paraid"></p><script>
function onInput()
{
var a = document.getElementById("tutorial").value;
document.getElementById("paraid").innerHTML = "The text is: " +a;
}
</script></body></html>
Code Explanation for oninput Attribute in HTML:
oninput attribute value is onInput() it is used to call JavaScript function when the user start to type the text in the text box.
function onInput() is a JavaScript function. The function name must be same as on the oninput attribute value of <input> tag.
Get the value from <input> tag which has id value as “tutorial” and stored in variable a.
The innereHTML text of element which has id as “paraid” will be changed to “The text is:” and concatenate with value of “a” variable.
Output for oninput Attribute in HTML:
The output shows the text box is displayed on page load.
When the user start to type anything in the text box that will be displayed on bottom of the textbox.
Browser Support for oninput Attribute in HTML:
Yes
9.0
4.0
5.0
Yes
Tips and Notes
The oninput attribute is like to the onchange event.
The difference is which the oninput event shows suddenly after the value of an element has changed, although onchange event shows when the element drops focus.
