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

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!