Inhaltsverzeichnis

Die Anleitung zu Javascript InputEvent

1- InputEvent

InputEvent  ist eine Interface zur Vertretung der Events, die passieren wenn der Benutzer die Daten auf das bearbeitbare Element (editable element) wie  <input>, <textarea> oder die Element mit dem Attribut  contenteditable="true" ​​​​​​​eingibt.
InputEvent ist eine Sub-Interface von  UIEvent.
Die Events
Event  Die Bezeichnung
input Das Event passiert wenn ein Element das Input vom Benutzer bekommt.
Die Browser, die  InputEvent ​​​​​​​unterstützen:
Zum Beispiel: die Elemente unterstützen das Event  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

Sie können überlegen, das Event  change zu benutzen denn es ist ziemlich gleich wie das Event  input:
  • Das Event change unterstützt das Element <select>, es passiert wenn der Benutzer die Auswählen (option) in <select> ändert.
  • Für die Elemente <input> (text, number, email, password, tel, time, week, month, date, datetime-local, search, url), <textarea>: Das Event input passiert gleich nachdem die Wert des Element ändert. Inzwischen, das Event change passiert wenn die Wert des Element ändert und das Element verliert focus.

2- Properties, Methods

InputEvent ist die Sub-Interface von  UIEvent . So erbt es alle Methode, Properties aus  UIEvent. Außerdem hat es seine eigene Methode und Properties.

Properties:

Property Die Bezeichnung
data Die eingefügten Zeichen zurückgeben. Das kann ein Leerstring sein wenn die Änderung in die Text eingefügt wird (z.B die Zeichen löschen).
dataTransfer Ein Objekt DataTransfer zurückgeben, das die zu/aus der Inhalt des Element eingefügten oder gelöschten Daten richtext oder plaintext enthaltet
inputType Die Änderungstype zurückgeben, z.B 'inserting', 'deleting', 'formatting', ...
isComposing true/false zurückgeben, die berichtet, ob das Event nach dem Event compositionstart und vor dem Event compositionend ausgelöst wird.
Die möglichen Werte von  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 Die Bezeichnung
getTargetRanges() Ein Array für die Enthaltung der Zielsumfang zurückgeben, das durch das Event beeinflusst wird.
Achtung: Obwohl  InputEvent durch alle Browser unterstützt wird, werden einige Properties und Methode von  InputEvent aber in einigen Browser nicht unterstützt. Deshalb sollen Sie überlegen, sie zu benutzen.
Zum Beispiel:
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>