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

Empêcher la soumission d'un formulaire Web lorsque vous appuyez sur la touche ENTRÉE

Lors de la conception d'applications Web, il est souvent souhaitable d'empêcher la touche ENTRÉE de soumettre un formulaire . Cela peut être accompli en utilisant JavaScript.

Solution :

Révision 2012 (gestionnaire en ligne)

Définir une fonction checkEnter to gérer la pression sur la touche ENTRÉE :

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

Attribuer ce gestionnaire au formulaire :

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

Cela empêche la soumission sur ENTRÉE pour tous les éléments à l'exception des zones de texte.

Révision 2024 (délégation d'événement)

Mettre en œuvre une approche plus moderne en utilisant la délégation d'événement :

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

function logClear(...txt) {
  console.clear();
  console.log(...txt);
}

Ajoutez l'attribut data-enter-for-submit aux éléments que vous souhaitez soumettre sur ENTER :

<input data-enter-for-submit="1" 
    placeholder="enter text, try using enter to submit">

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!