Table des matières
Le Tutoriel de Javascript InputEvent
View more Tutorials:
Suivez-nous sur notre fanpage pour recevoir des notifications chaque fois qu'il y a de nouveaux articles.
Facebook
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.
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>
*
