Die Anleitung zu Javascript InputEvent

View more Tutorials:

Anleitungen ECMAScript, Javascript

InputEvent
Properties, Methods

Kostenlose Website zum Sprachenlernen:

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt.

Facebook

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.

Javascript ChangeEvent

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>

View more Tutorials:

Anleitungen ECMAScript, Javascript