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