html tutorial - oninput Attribute in HTML - html5 - html code - html form



Oninput attribute in html

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 Code Explanation

  1. oninput attribute value is onInput() it is used to call JavaScript function when the user start to type the text in the text box.
  2. function onInput() is a JavaScript function. The function name must be same as on the oninput attribute value of <input> tag.
  3. Get the value from <input> tag which has id value as “tutorial” and stored in variable a.
  4. 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:

oninput Attribute Output

  1. The output shows the text box is displayed on page load.
  2. oninput Attribute Output
  3. 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.

Related Searches to oninput attribute in html