Comment empêcher la soumission d'un formulaire lorsque vous appuyez sur la touche Entrée ?

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

Dans les applications Web, empêcher la touche ENTRÉE de soumettre un formulaire garantit que le formulaire est uniquement soumis lorsque l'utilisateur clique explicitement sur le bouton de soumission. Cette approche améliore l'expérience utilisateur et évite les soumissions accidentelles de formulaires.

Pour empêcher la touche ENTRÉE de déclencher la soumission du formulaire, vous pouvez utiliser l'extrait de 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;
}

Une fois que vous avez défini le checkEnter, vous pouvez l'attacher en tant que gestionnaire de touches au formulaire :

<form [...] onkeypress="return checkEnter(event)">

Vous pouvez également utiliser ce qui suit Approche ES20xx :

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

Cette approche utilise la délégation d'événements pour empêcher la soumission du formulaire lorsque la touche ENTRÉE est enfoncée, permettant à l'utilisateur de saisir du texte multiligne dans des éléments de zone de texte sans déclencher la soumission.

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!