Table des matières

Le Tutoriel de Javascript InputEvent

View more Tutorials:

1- InputEvent

InputEvent est une interface qui représente les événements survenant lorsqu’un utilisateur saisit des données sur les éléments modifiables tels que <input>, <textarea> ou les éléments avec des attributs (attribute) contenteditable="true".
InputEvent est une sous interface de  UIEvent.
Des événements :
Evénement Description
input L'événement se produit lorsqu'un élément reçoit l'entrée de l'utilisateur.
Les navigateurs qui soutiennent  InputEvent :
Exemple des événements qui soutiennent l'événement 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

Vous pouvez également envisager d'utiliser l'événement change car il est très similaire à l'événement input :
  • L'événement change soutient l'élément <select>, il survient lorsque l'utilisateur change l'option (option) sur <select>.
  • Avec les éléments <input> (text, number, email, password, tel, time, week, month, date, datetime-local, search, url), <textarea>: L'événement input se produit immédiatement après que la valeur de l’élément change. Alors que l’événement changese produit lorsque la valeur de l’élément change et que l’élément perd focus.

2- Properties, Methods

InputEvent est la sous-interface de UIEvent, elle hérite donc de toutes les méthodes et propriétés (property) de UIEvent. En outre, elle a ses propres méthodes et propriétés (property).

Properties:

Propriété Description
data Renvoie les caractères insérés. Il peut être une chaîne vide si la modification n’insère pas de texte (comme lors de la suppression de caractères, par exemple).
dataTransfer Renvoie un objet DataTransfer contenant des informations sur les données en richtext ou en plaintext qui sont ajoutées ou supprimées du contenu modifiable.
inputType Renvoie le type de changement pour le contenu modifiable, par exemple : 'inserting', 'deleting', 'formatting', ...
isComposing Renvoie true/false indiquant si l’événement est déclenché après l'événement compositionstart et avant l'événement compositionend.
Les valeurs possibles de  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:

Méthode Description
getTargetRanges() Renvoie un tableau contenant les zones cibles qui seront affectées par cet événement.
Remarque : Bien que InputEvent soit supporté par tous les navigateurs, certaines propriétés (property) et méthodes de InputEvent ne sont pas supportées par certains navigateurs, vous devriez donc envisager de les utiliser. 
Exemple :
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: