HTML | DOM InputEvent
The input event is fired when the user changes an element, the value of an element or <textarea> element.
DOM InputEvent occurs when an element in the HTML document gets input from the user.
InputEvent property:
- data: Returns the inserted characters.
- dataTransfer: Returns an object containing information about the inserted/deleted data.
- getTargetRanges: Returns an array containing target ranges that will be affected by the insertion/.eletion.
- inputType: Returns the type of the change (i.e “inserting” or “deleting”)
- isComposing: Returns the state of the event.
Syntax:
<element oninput="Function">
Example-1: Accessing input type using “event.inputType;”
<!DOCTYPE html><html> <body> <input type="text" id="myInput" oninput="myFunction(event)"> <p>The type of action:<span id="demo"> </span></p> <script> function myFunction(event) { document.getElementById( "demo").innerHTML = event.inputType; } </script> </body> </html> |
Output:
Before:
After:
Example-2: Accessing data property to return inserted characters.
<!DOCTYPE html><html> <body> <input type="text" id="myInput" oninput="myFunction(event)"> <p>The inserted character: <span id="demo"> </span></p> <script> function myFunction(event) { document.getElementById( "demo").innerHTML = event.data; } </script> </body> </html> |
Output:
Before:
After:
Example-3: oninput return the whole inserted data.
<!DOCTYPE html><html> <body> <p>Write something in the text field to start the function....</p> <input type="text" id="myInput" oninput="Function()"> <p id="demo"></p> <script> function Function() { var x = document.getElementById( "myInput").value; document.getElementById( "demo").innerHTML = "You wrote: " + x; } </script> </body> </html> |
Output:
Before:
After:
Supported Browsers:
- Google Chrome
- Mozilla Firefox 4.0
- Internet Explorer 9.0
- Safari 5.0
- Opera
Please Login to comment...