diff --git a/2-ui/4-forms-controls/3-events-change-input/article.md b/2-ui/4-forms-controls/3-events-change-input/article.md index b43a305b3..d27f1aeee 100644 --- a/2-ui/4-forms-controls/3-events-change-input/article.md +++ b/2-ui/4-forms-controls/3-events-change-input/article.md @@ -1,21 +1,21 @@ -# Events: change, input, cut, copy, paste +# Les événements: change, input, cut, copy, paste -Let's cover various events that accompany data updates. +Découvrons différents événements qui accompagnent les mises à jour des données. -## Event: change +## Événement: change -The `change` event triggers when the element has finished changing. +L'événement `change` se déclenche lorsque le changement de la valeur de l'élément a fini de se réaliser. -For text inputs that means that the event occurs when it loses focus. +Pour les éléments `input` de type `text` cela signifie que l'événement se produit lorsqu'ils perdent le focus. -For instance, while we are typing in the text field below -- there's no event. But when we move the focus somewhere else, for instance, click on a button -- there will be a `change` event: +Par exemple, pendant que nous saisissons dans le champ de texte ci-dessous -- il n'y a aucun événement. Mais lorsque nous déplaçons le focus ailleurs, par exemple, en cliquant sur un bouton -- il y aura un événement `change`: ```html autorun height=40 run ``` -For other elements: `select`, `input type=checkbox/radio` it triggers right after the selection changes: +Pour les autres éléments: `select`, `input type=checkbox/radio` il se déclenche juste après les changements de sélection: ```html autorun height=40 run oninput: @@ -44,25 +44,26 @@ For instance: ``` -If we want to handle every modification of an `` then this event is the best choice. +Si nous voulons gérer chaque modification d'un `` alors cet événement est le meilleur choix. -On the other hand, `input` event doesn't trigger on keyboard input and other actions that do not involve value change, e.g. pressing arrow keys `key:⇦` `key:⇨` while in the input. +D'un autre coté, l'événement `input` ne se déclenche pas lors de la saisie au clavier et d'autres actions qui n'impliquent de changement de valeur, par ex. en appuyant sur les touches fléchées `touche:⇦` `touche:⇨` pendant la saisie. -```smart header="Can't prevent anything in `oninput`" -The `input` event occurs after the value is modified. +``` +smart header="Can't prevent anything in `oninput`" +L'événement `input` se produit après la modification de la valeur. -So we can't use `event.preventDefault()` there -- it's just too late, there would be no effect. +Nous ne pouvons donc pas utiliser `event.preventDefault()` - c'est trop tard, il n'y aurait aucun effet. ``` -## Events: cut, copy, paste +## Événements: cut, copy, paste -These events occur on cutting/copying/pasting a value. +Ces événements se produisent lors de la coupe/copie/collage d'une valeur. -They belong to [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) class and provide access to the data that is copied/pasted. +Ils appartiennent à la classe [ClipboardEvent](https://www.w3.org/TR/clipboard-apis/#clipboard-event-interfaces) et permettent d'accéder aux données copiées/collées. -We also can use `event.preventDefault()` to abort the action, then nothing gets copied/pasted. +Nous pouvons également utiliser `event.preventDefault()` pour interrompre l'action, puis rien n'est copié/collé. -For instance, the code below prevents all such events and shows what we are trying to cut/copy/paste: +Par exemple, le code ci-dessous empêche tous ces événements et montre ce que nous essayons de couper/copier/coller: ```html autorun height=40 run @@ -74,20 +75,20 @@ For instance, the code below prevents all such events and shows what we are tryi ``` -Please note, that it's possible to copy/paste not just text, but everything. For instance, we can copy a file in the OS file manager, and paste it. +Veuillez noter qu'il est possible de copier/coller non seulement du texte, mais tout. Par exemple, nous pouvons copier un fichier dans le gestionnaire de fichiers du système d'exploitation et le coller. -There's a list of methods [in the specification](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer) that can work with different data types including files, read/write to the clipboard. +Il y a une liste de méthodes [dans la spécification](https://www.w3.org/TR/clipboard-apis/#dfn-datatransfer) qui peuvent fonctionner avec différents types de données, y compris des fichiers, en lecture/écriture dans le presse-papiers. -But please note that clipboard is a "global" OS-level thing. Most browsers allow read/write access to the clipboard only in the scope of certain user actions for the safety, e.g. in `onclick` event handlers. +Mais veuillez noter que le presse-papiers est une chose "globale" au niveau du système d'exploitation. La plupart des navigateurs n'autorisent l'accès en lecture/écriture au presse-papiers que dans le cadre de certaines actions de l'utilisateur pour raison de sécurité, par ex: dans les gestionnaires d'événements `onclick`. -Also it's forbidden to generate "custom" clipboard events with `dispatchEvent` in all browsers except Firefox. +Il est également interdit de générer des événements de presse-papiers "personnalisés" avec `dispatchEvent` dans tous les navigateurs, à l'exception de Firefox. -## Summary +## Récapitulatif -Data change events: +Événements de changement de données: -| Event | Description | Specials | +| Événement | Description | Specials | |---------|----------|-------------| -| `change`| A value was changed. | For text inputs triggers on focus loss. | -| `input` | For text inputs on every change. | Triggers immediately unlike `change`. | -| `cut/copy/paste` | Cut/copy/paste actions. | The action can be prevented. The `event.clipboardData` property gives read/write access to the clipboard. | +| `change`| Une valeur a été modifiée | Se déclenche à la perte du focus pour les champs textes. | +| `input` | Pour les champs textes à chaque modification. | Se déclenche immédiatement contrairement à `change`. | +| `cut/copy/paste` | Les actions couper/copier/coller. | L'action peut être empêchée. La propiété `event.clipboardData` donne un accès en lecture/écriture au presse-papiers. |