codestory

Die Anleitung zu Javascript InputEvent

  1. InputEvent
  2. Properties, Methods

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>

Anleitungen ECMAScript, Javascript

Show More

Anleitungen ECMAScript, Javascript

Show More

Neueste Artikel

Show More