La méthode preventDefault()
de l 'interface Event
indique à l'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 stopPropagation()
ou stopImmediatePropagation()
, dont l'un ou l'autre termine la propagation.
Syntaxe
Event.preventDefault();
Paramètres
None (aucun)
Valeur retournée
undefined
.
Exemples
Bloquer la gestion des clics par défaut
L'action par défaut du clic sur une case à cocher est le changement de son état. Cet exemple montre comment annuler cette action :
JavaScript
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);
HTML
<p>Please click on the checkbox control.</p>
<form>
<label for="id-checkbox">Checkbox:</label>
<input type="checkbox" id="id-checkbox"/>
</form>
<div id="output-box"></div>
Résultat
Vous pouvez voir preventDefault
en action ici (anglais) :
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;
}
JavaScript
Et voici le code JavaScript qui fait le travail. Tout d'abord, écoutez les événements 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
Ici le résultat du code précédent :
Notes
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.
Note : Depuis Gecko 6.0, appeler preventDefault()
passe la valeur de la propriété event.defaultPrevented
à true
.
Vous pouvez utiliser 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.
Spécification
Spécification | Statut | Commentaire |
---|---|---|
DOM La définition de 'Event.preventDefault()' dans cette spécification. |
Standard évolutif | |
Document Object Model (DOM) Level 2 Events Specification La définition de 'Event.preventDefault()' dans cette spécification. |
Obsolete | Définition initiale. |
Compatibilité des navigateurs
BCD tables only load in the browser