Comment empêcher les soumissions de formulaires indésirables lors de la pression sur la touche ENTRÉE dans les applications Web ?

Empêcher la soumission de formulaires Web en appuyant sur la touche ENTRÉE

Dans les applications Web, les soumissions de formulaires par inadvertance déclenchées par la touche ENTRÉE peuvent être une nuisance. Ce guide fournit des solutions pour éviter de tels comportements indésirables.

Solution 1 : Gestionnaire de touches personnalisé

Un gestionnaire de touches personnalisé peut être implémenté pour le formulaire afin d'intercepter la pression sur la touche ENTRÉE et d'empêcher la soumission du formulaire pour tous. éléments à l'exception des zones de texte.

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;

Solution 2 : Délégation d'événements avec JavaScript moderne

Une approche plus moderne utilisant la délégation d'événements peut être utilisé pour gérer les presses ENTER. Cette approche implique de capturer l'événement au niveau du document et de rechercher l'ancêtre du formulaire le plus proche. Seuls les éléments désignés avec l'attribut data-enter-for-submit déclencheront l'envoi du formulaire sur ENTER.

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

Notes supplémentaires

• Les zones de texte doivent être traitées différemment, car appuyer sur ENTRÉE dans une zone de texte signifie généralement un saut de ligne.
• Les extraits de code fournis sont personnalisables et peuvent être adaptés à une application spécifique. besoins.

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!