Cодержание

Руководство Javascript InputEvent

1- InputEvent

InputEvent это интерфейс представляющий события, происходящие когда пользователь вводит данные на редактируемых элементах (editable element) как например  <input>, <textarea> или элементы с атрибутами (attribute) contenteditable="true".
InputEvent это подинтерфейс у UIEvent.
События:
Событие Описание
input Событие происходит, когда элемент получает ввод от пользователя.
Браузеры, поддерживающие  InputEvent:
Например, элементы поддерживающие событие  input:
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

Вы так же можете рассмотреть возможность использовать событие change, так как оно довольно похоже на событие  input:
  • Событие change поддерживает элемент <select>, оно происходит, когда пользователь меняет опции (option) на <select>.
  • Для элементов <input> (text, number, email, password, tel, time, week, month, date, datetime-local, search, url), <textarea>: Событие input происходит сразу после того, как меняется значение элемента. В то время как событие change происходит, когда значение элемента меяется и элемент теряет focus.

2- Properties, Methods

InputEvent это подинтерфейс  UIEvent, поэтому он наследует все методы, свойства (property) от  UIEvent. Помимо этого, он имеет свои собственные дополнительные методы и свойства (property).

Properties:

Cвойства Описание
data Возвращает вставленные символы. Это может быть пустой строкой, если изменения не вставляют текст (например когда удаляются символы).
dataTransfer Возвращает объект DataTransfer содержащий информацию про данные richtext или plaintext добавленные или удаленные из содержания элемента.
inputType Возвращает вид изменения, например 'inserting', 'deleting', 'formatting', ...
isComposing Возвращает true/false дает знать, данное событие активировано после события compositionstart или перед событием compositionend.
Возможные значения у 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:

Метод Описание
getTargetRanges() Возвращает массив содержащий целевые диапазоны, которые будут затронуты этим событием.
Примечание: Несмотря на то, что InputEvent поддерживается всеми браузерами, некоторые свойства (property) и методы  InputEvent не поддерживаются в нескольких браузерах, поэтому вам стоит рассмотреть перед использованием.
Например:
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>