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


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.