Maison > interface Web > js tutoriel > Comment puis-je empêcher l'envoi d'un formulaire lorsque la touche Entrée est enfoncée ?

Comment puis-je empêcher l'envoi d'un formulaire lorsque la touche Entrée est enfoncée ?

Mary-Kate Olsen
Libérer: 2024-11-26 01:52:09
original
233 Les gens l'ont consulté

How Can I Prevent Form Submission When the Enter Key is Pressed?

Éviter la soumission du formulaire lorsque vous appuyez sur la touche Entrée

Dans le but de faciliter une fonction personnalisée lorsque vous appuyez sur la touche Entrée, tout en évitant la soumission du formulaire, il est crucial de désactiver la soumission par défaut du formulaire comportement.

Solution :

Pour y parvenir, interceptez l'événement de la touche Entrée en définissant un écouteur d'événement :

if(characterCode == 13) {
    // Prevent event propagation
    return false; 
} else{
    return true;
}
Copier après la connexion

Cet extrait de code garantit qu'appuyer sur la touche Entrée ne propage pas davantage l'événement, empêchant ainsi la forme soumission.

Exemple :

Considérons un formulaire avec la zone de texte suivante :

<input>
Copier après la connexion

Pour exécuter un script personnalisé à partir de cette zone de texte lors Appuyez sur la touche Entrée sans déclencher l'envoi du formulaire, utilisez ce code :

function runScript(e) {
    // Prevent form submission if Enter key is pressed
    if (e.keyCode == 13) {
        var tb = document.getElementById("scriptBox");
        eval(tb.value);
        return false;
    }
}
Copier après la connexion

En renvoyant false depuis la fonction d'écoute d'événement, la touche Entrée L'événement est effectivement désactivé, permettant au script personnalisé de s'exécuter sans soumission.

Remarque :

Bien que l'utilisation de keyCode soit obsolète, elle reste une option viable dans la pratique. De plus, malgré son statut obsolète, il est toujours couramment utilisé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal