betacode

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

  1. InputEvent
  2. Properties, Methods

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>

Pуководства ECMAScript, Javascript

Show More

Pуководства ECMAScript, Javascript

Show More

Новейшие статьи

Show More