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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
Before:

After:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
Before:

After:

Example-3: oninput return the whole inserted data.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:
Before:

After:

Supported Browsers:

  • Google Chrome
  • Mozilla Firefox 4.0
  • Internet Explorer 9.0
  • Safari 5.0
  • Opera


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.