o7planning

Javascript InputEvent Tutorial with Examples

  1. InputEvent
  2. Properties, Methods

1. InputEvent

InputEvent is an interface that represents events occurring when a user enters data on the editable elements such as <input>, <textarea> or the elements with contenteditable="true" attributes.
InputEvent is a sub-interface of UIEvent.
Events:
Event
Description
input
The event occurs when an element gets user input
The browsers that support InputEvent:
Example of elements that support the input event:
inputevents-elements-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>InputEvent Example</title>
      <meta charset="UTF-8">

      <style>
         *[contenteditable='true']   {
            height:30px;padding:5px;border:1px solid #ccd;
         }
      </style>
      <script>
          // Note: event.data is not supported in Firefox, IE
          function inputHandler(evt)  {

             showLog(evt.data);
          }

          function showLog(text)  {
            var logDiv = document.getElementById("log-div");
            logDiv.innerHTML = logDiv.innerHTML + " .. " + text;
          }
      </script>

   </head>
   <body>

      <h3>InputEvent example</h3>
      <p style="color:red">Note: event.data is not supported in Firefox, IE</p>

      <h3>Input element</h3>
      <input type="text" oninput ="inputHandler(event)"/>

      <h3>Textarea element</h3>
      <textarea oninput ="inputHandler(event)" rows="5" cols="30"></textarea>

      <h3>Elements with contenteditable='true'</h3>
      <div oninput ="inputHandler(event)" contenteditable="true"></div>

      <p id="log-div"></p>


   </body>
</html>
Events: input vs change
You also can consider using the change event because it is quite similar to the input event:
  • The change event supports the <select> element. It occurs when users change the option on <select>.
  • For the <input> (text, number, email, password, tel, time, week, month, date, datetime-local, search, url), <textarea> elements: The input event occurs immediately after the value of element changes. While the change event occurs when the value of element changes and the element loses focus.

2. Properties, Methods

InputEvent is the sub-interface of UIEvent so it inherits all methods and properties from UIEvent. In addition, it has its own methods and properties.
Properties:
Property
Description
data
Returns the inserted characters. This may be an empty string if the change doesn't insert text (such as when deleting characters, for example).
dataTransfer
Returns a DataTransfer object containing information about richtext or plaintext data being added to or removed from editable content.
inputType
Returns the type of change for editable content such as, for example, 'inserting', 'deleting', 'formatting', ...
isComposing
Returns true/false indicating if the event is fired after compositionstart and before compositionend.
The possible values of inputType:
  • insertText
  • insertReplacementText
  • insertLineBreak
  • insertParagraph
  • insertOrderedList
  • insertUnorderedList
  • insertHorizontalRule
  • insertFromYank
  • insertFromDrop
  • insertFromPaste
  • insertTranspose
  • insertCompositionText
  • insertFromComposition
  • insertLink
  • deleteByComposition
  • deleteCompositionText
  • deleteWordBackward
  • deleteWordForward
  • deleteSoftLineBackward
  • deleteSoftLineForward
  • deleteEntireSoftLine
  • deleteHardLineBackward
  • deleteHardLineForward
  • deleteByDrag
  • deleteByCut
  • deleteByContent
  • deleteContentBackward
  • deleteContentForward
  • historyUndo
  • historyRedo
  • formatBold
  • formatItalic
  • formatUnderline
  • formatStrikethrough
  • formatSuperscript
  • formatSubscript
  • formatJustifyFull
  • formatJustifyCenter
  • formatJustifyRight
  • formatJustifyLeft
  • formatIndent
  • formatOutdent
  • formatRemove
  • formatSetBlockTextDirection
  • formatSetInlineTextDirection
  • formatBackColor
  • formatFontColor
  • formatFontName
Methods:
Method
Description
getTargetRanges()
Returns an array containing target ranges that will be affected by this event.
Note: Although InputEvent is supported by all browsers, some properties and methods of InputEvent are not supported in some browsers, so you should consider using them.
Example:
inputevents-properties-example.html
<!DOCTYPE html>
<html>
   <head>
      <title>InputEvent Example</title>
      <meta charset="UTF-8">

      <script>
          // Note: event.data, event.inputType is not supported in Firefox, IE
          function inputHandler(evt)  {

             showLog(evt.data +" - " + evt.inputType);
          }

          function showLog(text)  {
            var logDiv = document.getElementById("log-div");
            logDiv.innerHTML =   text;
          }
      </script>

   </head>
   <body>

      <h3>InputEvent properties example</h3>
      <p style="color:red">Note: event.data, event.inputType is not supported in Firefox, IE</p>

      <input type="text" oninput ="inputHandler(event)"/>

      <p id="log-div"></p>


   </body>
</html>

ECMAScript, Javascript Tutorials

Show More