From 252eb18fe000a84e356d73a7184a960b7ea80314 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Mon, 21 Jun 2021 20:45:27 +0200 Subject: Fixes #1265 by updating vs. en-US and simplifying far-fetched example (#1269) * Fixes #1265 by updating vs. en-US and simplifying far-fetched example * FIX: missing bcd on head Co-authored-by: tristantheb --- files/fr/web/api/event/preventdefault/index.html | 191 +++++++---------------- 1 file changed, 53 insertions(+), 138 deletions(-) diff --git a/files/fr/web/api/event/preventdefault/index.html b/files/fr/web/api/event/preventdefault/index.html index 0290a49d70..db435939bb 100644 --- a/files/fr/web/api/event/preventdefault/index.html +++ b/files/fr/web/api/event/preventdefault/index.html @@ -1,180 +1,95 @@ --- -title: event.preventDefault +title: Event.preventDefault() slug: Web/API/Event/preventDefault tags: - API - DOM - - Evènement - - Gecko - - Méthodes + - Event + - Method + - Reference translation_of: Web/API/Event/preventDefault +browser-compat: api.Event.preventDefault --- -
{{ ApiRef("DOM") }}
+
{{apiref("DOM")}}
-
 
+

La méthode preventDefault(), rattachée à l'interface Event, indique à l'agent utilisateur que si l'évènement n'est pas explicitement géré, l'action par défaut ne devrait pas être exécutée comme elle l'est normalement.

-

La méthode  preventDefault() de l 'interface {{domxref("Event")}} indique à l'{{Glossary("user agent","agent utilisateur")}} que si l'événement n'est pas traité explicitement, son action par défaut ne doit pas être prise en compte comme elle le serait normalement. L'événement continue à se propager comme d'habitude, sauf si l'un de ses écouteurs appelle {{domxref("Event.stopPropagation", "stopPropagation()")}} ou {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}} , dont l'un ou l'autre termine la propagation.

+

L'évènement continue sa propagation habituelle à moins qu'un des gestionnaires d'évènement invoque stopPropagation() ou stopImmediatePropagation() pour interrompre la propagation.

-

Syntaxe

+

Comme indiqué ci-après, appeler preventDefault() n'aura aucun effet pour un évènement qui ne peut être annulé (comme ceux émis par EventTarget.dispatchEvent() sans avoir indiqué cancelable: true).

-
Event.preventDefault();
+

Syntaxe

-

Paramètres

+
event.preventDefault();
-

None (aucun)

+

Exemples

-

Valeur retournée

+

Bloquer la gestion du clic par défaut

-

undefined.

+

Lorsqu'on clique sur une case à cocher, par défaut, cela coche ou décoche la case. Dans cet exemple, on illustre comment bloquer ce comportement par défaut :

-

Exemples

+

JavaScript

-

Bloquer la gestion des clics par défaut

+
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
+  console.log("Désolé ! preventDefault() ne vous laissera pas cocher ceci.");
+  event.preventDefault();
+}, false);
-

L'action par défaut du clic sur une case à cocher est le changement de son état. Cet exemple montre comment annuler cette action :

+

HTML

-

JavaScript

+
<p>Essayez de cliquer sur la case à cocher.</p>
 
-
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
-         document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
-         event.preventDefault();
-}, false);

+<form>
+  <label for="id-checkbox">Checkbox:</label>
+  <input type="checkbox" id="id-checkbox"/>
+</form>
-

HTML

+

Résultat

-
<p>Please click on the checkbox control.</p>
+
{{EmbedLiveSample("blocking_default_click_handling")}}

 
-<form>
-  <label for="id-checkbox">Checkbox:</label>
-  <input type="checkbox" id="id-checkbox"/>
-</form>
+
Empêcher les pressions du clavier sur un champ texte

 
-<div id="output-box"></div>
+

Dans l'exemple qui suit, on démontre comment empêcher d'écrire au clavier dans un champ texte grâce à preventDefault().

-

Résultat

+

HTML

-

Vous pouvez voir preventDefault en action ici (anglais) :

+

Voici le formulaire contenant le champ texte :

-

{{EmbedLiveSample("Blocking_default_click_handling")}}

- -

Arrêter les frappes de touches pour atteindre un champ d'édition

- -

L'exemple suivant montre comment bloquer la saisie de texte invalide dans un champ input avec preventDefault(). Actuellement, vous devriez normalement utiliser la validation de forme HTML native à la place.

- -

HTML

- -

Ici le formulaire :

- -
<div class="container">
-  <p>Please enter your name using lowercase letters only.</p>
-
-  <form>
-    <input type="text" id="my-textbox">
-  </form>
-</div>
- -

CSS

- -

Nous utilisons un peu de CSS pour la boîte d'avertissement qui sera dessinée lorsque l'utilisateur appuie sur une touche non valide :

- -
.warning {
-  border: 2px solid #f39389;
-  border-radius: 2px;
-  padding: 10px;
-  position: absolute;
-  background-color: #fbd8d4;
-  color: #3b3c40;
-}
+
<form>
+  <label>Un champ texte
+    <input type="text" id="mon-champ-texte">
+  </label>
+</form>

JavaScript

-

Et voici le code JavaScript qui fait le travail. Tout d'abord, écoutez les événements {{event("keypress")}}:

- -
var myTextbox = document.getElementById('my-textbox');
-myTextbox.addEventListener('keypress', checkName, false);
- -

La fonction checkName(), qui regarde la touche enfoncée et décide de l'autoriser :

- -
function checkName(evt) {
-  var charCode = evt.charCode;
-  if (charCode != 0) {
-    if (charCode < 97 || charCode > 122) {
-      evt.preventDefault();
-      displayWarning(
-        "Please use lowercase letters only."
-        + "\n" + "charCode: " + charCode + "\n"
-      );
-    }
-  }
-}
- -

La fonction displayWarning()  présente une notification d'un problème. Ce n'est pas une fonction élégante mais elle fait le travail nécessaire à cet exemple :

- -
var warningTimeout;
-var warningBox= document.createElement("div");
-warningBox.className = "warning";
-
-function displayWarning(msg) {
-  warningBox.innerHTML = msg;
-
-  if (warningBox) {
-    window.clearTimeout(warningTimeout);
-  } else {
-    myTextbox.parentNode.insertBefore(warningBox, myTextbox);
-  }
-
-  warningTimeout = window.setTimeout(function() {
-      warningBox.parentNode.removeChild(warningBox);
-      warningTimeout = -1;
-    }, 2000);
-}
- -

Résultat

+

Et voici le fragment de code JavaScript qui s'occupe de la logique principale. On commence par enregistrer un gestionnaire d'évènement pour keypress :

-

Ici le résultat du code précédent :

+
let monChampTexte = document.getElementById('mon-champ-texte');
+monChampTexte.addEventListener('keypress', bloqueSaisie, false);
-

{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}

+

La fonction bloqueSaisie() empêche toute saisie au clavier :

-

Notes

+
function bloqueSaisie(evt) {
+  evt.preventDefault();
+  console.log("Une saisie a été empêchée.");
+};
-

Appeler preventDefault pendant chaque étape de la propagation de l'évènement annule celui-ci, ce qui signifie que chaque action par défaut se produisant normalement ne se produira pas.

+

Résultat

-
-

Note : Depuis {{Gecko("6.0")}}, appeler preventDefault() passe la valeur de la propriété {{domxref("event.defaultPrevented")}} à true.

-
+

{{EmbedLiveSample('stopping_keystrokes_from_reaching_an_edit_field', 600, 200)}}

-

Vous pouvez utiliser {{domxref("Event.cancelable")}} pour vérifier que l'évènement peut être annulé. Appeler preventDefault sur un évènement qui ne peut pas être annulé n'a aucun effet.

+

Notes

-

Spécification

+

Invoquer preventDefault() à n'importe quel moment du cycle de vie d'un évènement annulera cet évènement. Cela signifie que toute action par défaut, normalement exécutée par le navigateur, n'aura pas lieu.

-
-
- - - - - - - - - - - - - - - - - - - - -
SpécificationStatutCommentaire
{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}{{ Spec2('DOM2 Events') }}Définition initiale.
-
-
+

On peut utiliser la propriété Event.cancelable afin de vérifier si un évènement est annulable. Invoquer preventDefault() sur un évènement non-annulable n'aura aucun effet.

-

Compatibilité des navigateurs

+

Spécifications

+

{{Specifications}}

+

Compatibilité des navigateurs

-

{{Compat("api.Event.preventDefault")}}

+

{{Compat}}

-- cgit v1.2.3-54-g00ecf