devstory

Le Tutoriel de Javascript InputEvent

  1. InputEvent
  2. Properties, Methods

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>

Tutoriels de programmation ECMAScript, Javascript

Show More

Tutoriels de programmation ECMAScript, Javascript

Show More

Articles les plus récents

Show More