javascript appuyez sur Entrée pour ne pas soumettre

Dans le développement Web, JavaScript est un langage de programmation indispensable. Dans de nombreux cas, nous devons capturer certaines opérations utilisateur, telles que la touche Entrée, pour obtenir des effets interactifs spécifiques. Cependant, nous ne souhaitons parfois pas que le comportement de soumission de formulaire par défaut de la touche Entrée se produise. Que devons-nous faire dans ce cas ? Cet article explique comment empêcher l'événement de soumission par défaut de la touche Entrée via JavaScript.

Comportement par défaut de la touche Entrée

Dans la plupart des formulaires Web, lorsque l'utilisateur appuie sur la touche Entrée dans une zone de texte d'une seule ligne, le formulaire est automatiquement soumis. Il s'agit du comportement par défaut fourni avec le navigateur et peut ne pas convenir à certains effets interactifs, tels qu'un simple champ de recherche. Lorsqu'un utilisateur saisit un mot-clé dans la zone de recherche et appuie sur la touche Entrée, si le comportement de soumission par défaut n'est pas empêché, le navigateur actualisera automatiquement la page et les mots-clés saisis par l'utilisateur seront perdus.

Empêcher l'événement de soumission par défaut de la touche Entrée

Pour empêcher l'événement de soumission par défaut de la touche Entrée, vous pouvez utiliser la méthode event.preventDefault() en JavaScript. Cette méthode peut empêcher le comportement par défaut de l'élément, comme empêcher l'événement de soumission par défaut du formulaire.

Supposons que nous ayons le code HTML suivant :

<form>
  <input type="text" id="search-input">
</form>

Nous pouvons empêcher l'événement de soumission de formulaire par défaut de la touche Entrée via le code JavaScript suivant :

const searchInput = document.querySelector('#search-input');
searchInput.addEventListener('keydown', (event) => {
  if (event.keyCode === 13) {
    event.preventDefault();
    console.log('阻止回车键默认提交事件');
  }
});

Dans le code ci-dessus, nous avons ajouté un écouteur d'événement keydown pour la zone de saisie, Cet événement est déclenché lorsque l'utilisateur appuie sur le clavier. Dans le gestionnaire d'événements, nous déterminons si l'utilisateur a appuyé sur la touche Entrée et, si tel est le cas, appelons event.preventDefault() pour empêcher l'événement de soumission par défaut du formulaire. En même temps, nous envoyons un message à la console afin de pouvoir vérifier si le code est efficace.

En plus d'empêcher l'événement de soumission par défaut du formulaire, nous pouvons également exécuter notre propre code JavaScript après la méthode event.preventDefault() pour obtenir des effets interactifs spécifiques.

Autres notes

Lors de la mise en œuvre de l'interdiction par la touche Entrée de soumettre des événements, vous devez faire attention aux points suivants :

1. La méthode event.preventDefault() n'est valable que pour le comportement par défaut à l'intérieur du gestionnaire d'événements, si c'est le cas. en dehors du gestionnaire d'événements L'appel de cette méthode n'aura aucun effet.
2. Dans l'événement keydown, nous pouvons utiliser event.keyCode pour obtenir le code clé enfoncé par l'utilisateur. Le code clé de la touche Entrée est 13.
3. Dans certains cas, comme lorsque la logique de la touche Entrée doit être traitée dans le champ de recherche tout en permettant au formulaire d'être soumis normalement, nous pouvons résoudre ce problème grâce au bouillonnement d'événements. Dans le gestionnaire d'événements keydown de la zone de recherche, si nous n'empêchons pas le comportement par défaut, l'événement remontera jusqu'à l'élément du formulaire, déclenchant ainsi l'événement de soumission par défaut du formulaire. Par conséquent, nous pouvons ajouter un écouteur d'événement de soumission sur l'élément de formulaire et exécuter notre propre code lorsque le formulaire est soumis.

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  console.log('表单被提交！');
})

Conclusion

JavaScript peut facilement empêcher la touche Entrée de soumettre des événements par défaut, obtenant ainsi un effet d'interaction plus libre. Nous pouvons empêcher le comportement par défaut du formulaire via la méthode event.preventDefault() pour obtenir l'effet interactif dont nous avons besoin. Dans le même temps, nous devons également prêter attention au moment et à la manière d'empêcher le comportement par défaut des gestionnaires d'événements afin d'éviter des erreurs inattendues.

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!