HTML DOM InputEvent

Last Updated : 03 Oct, 2024

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;"

HTML

<!DOCTYPE html>
<html>

<body>
    <h2>Input Event Input Type</h2>
    <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:

Example-2: Accessing data property to return inserted characters.

html

<!DOCTYPE html>
<html>
    
<head> 
    <title>
        HTML DOM InputEvent data Property
    </title> 
</head>

<body>
    <h1>GeeksforGeeks</h1> 
    
    <h2>InputEvent data Property</h2>
    
    <input type="text" id="GFG" oninput="myGeeks(event)">
    
    <p>Inserted character: <span id="test"></span></p>
    
    <script>
        function myGeeks(event) {
            document.getElementById("test").innerHTML
                    = event.data;
        }
    </script>
</body>

</html>

Output:

Example-3: In this example, oninput return the whole inserted data.

html

<!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:

Supported Browsers:

Google Chrome 1
Mozilla Firefox 4.0
Internet Explorer 9.0
Safari 5.0
Opera 11.6

HTML | DOM Parameter Object

kartikgoel1999

Improve

Article Tags :

HTML DOM InputEvent

InputEvent property:

Syntax:

Supported Browsers:

Similar Reads

Thank You!

What kind of Experience do you want to share?