codestory

Die Anleitung zu Javascript InputEvent

View more Tutorials:

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
inputDas 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:
PropertyDie Bezeichnung
dataDie 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).
dataTransferEin Objekt DataTransfer zurückgeben, das die zu/aus der Inhalt des Element eingefügten oder gelöschten Daten richtext oder plaintext enthaltet
inputTypeDie Änderungstype zurückgeben, z.B 'inserting', 'deleting', 'formatting', ...
isComposingtrue/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:
MethodDie 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:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.