devstory

Le Tutoriel de Javascript InputEvent

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énementDescription
inputL'é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
dataRenvoie 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).
dataTransferRenvoie 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.
inputTypeRenvoie le type de changement pour le contenu modifiable, par exemple : 'inserting', 'deleting', 'formatting', ...
isComposingRenvoie 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éthodeDescription
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>
 
Peut-être que vous êtes intéressé

Voici des leçons en ligne à part du site web o7planning que nous recommandons. La liste comprend des leçons en ligne et celles en promo.