Maison  >  Article  >  interface Web  >  Comment empêcher la soumission d'un formulaire avec la touche ENTRÉE ?

Comment empêcher la soumission d'un formulaire avec la touche ENTRÉE ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-07 18:50:03832parcourir

How to Prevent Form Submission with the ENTER Key?

Empêcher la soumission de formulaire Web avec la touche ENTRÉE

Empêcher la pression sur la touche ENTRÉE de déclencher la soumission de formulaire est une exigence courante dans le développement Web. Voici comment implémenter ce comportement dans une application Web :

Solution :

Pour désactiver l'envoi du formulaire lorsque vous appuyez sur la touche ENTRÉE tout en préservant le comportement de la zone de texte, utilisez le code suivant :

function checkEnter(e) {
    e = e || event;
    var txtArea = /textarea/i.test((e.target || e.srcElement).tagName);
    return txtArea || (e.keyCode || e.which || e.charCode || 0) !== 13;
}

Ensuite, ajoutez un gestionnaire de frappe au formulaire :

document.querySelector('form').onkeypress = checkEnter;

Approche alternative (moderne) :

Une approche plus moderne L'approche utilisant la délégation d'événements est la suivante :

document.addEventListener(`keypress`, handle);

function handle(evt) {
    const form = evt.target.closest(`#testForm`);
    if (form) {
        if (evt.target.dataset.enterForSubmit) {
            if (evt.key === `Enter`) {
                evt.preventDefault();
                return logClear(`won't submit "${evt.target.value}"`);
            }
            return true;
        }
    }
}

Dans ce cas, les éléments HTML peuvent être annotés avec data-enter-for-submit="1" pour autoriser de manière sélective la soumission de formulaire basée sur ENTER.

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!

Déclaration:
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