Comment empêcher la soumission d'un formulaire en appuyant sur la touche ENTRÉE ?

Empêcher la soumission d'un formulaire en appuyant sur la touche ENTRÉE

Dans les applications Web, la touche ENTRÉE est souvent utilisée pour soumettre un formulaire. Cependant, il est parfois souhaitable d'empêcher la soumission d'un formulaire en appuyant sur la touche ENTRÉE. Vous trouverez ci-dessous deux méthodes pour y parvenir :

Méthode 1 : Gestionnaire Onkeypress

Cette méthode utilise le gestionnaire d'événements onkeypress sur le formulaire. En créant une fonction qui vérifie si la touche enfoncée est ENTER (code clé 13) et en autorisant la soumission du formulaire uniquement si ce n'est pas ENTER, nous pouvons empêcher la soumission immédiate du formulaire. Le code de cette approche est :

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;
}
document.querySelector('form').onkeypress = checkEnter;

Méthode 2 : délégation d'événements avec JavaScript moderne

Une approche plus moderne utilisant ES20xx et la délégation d'événements consiste à définir un écouteur de pression de touche. sur l'ensemble du document. Cette méthode vérifie si le formulaire contenant l'entrée cible a un attribut spécial indiquant que la pression sur la touche ENTRÉE doit soumettre le formulaire. Le code JavaScript et HTML pertinent :

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;
    }
  }
}

<form>

Ces deux méthodes empêchent efficacement la soumission d'un formulaire en appuyant sur la touche ENTRÉE tout en permettant à la saisie dans la zone de texte, qui utilise naturellement ENTRÉE pour les sauts de ligne, de fonctionner normalement.

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!