1
votes

Comment détecter la pression de la touche ENTRÉE sur un champ de saisie avant que le formulaire ne soit soumis?

Veuillez vérifier le code suivant:

https://codepen.io/tkpop777/pen/ vYYVBOe

HTML:

document.querySelector('#textfield2').onkeyup = (e) => {
  e.preventDefault();
  if (e.keyCode == 13) {
    alert('enter key')
  }
}

document.querySelector('form').onsubmit = (e) => {
  e.preventDefault();
  alert('form submitted');
}

XXX

Si vous êtes sur le deuxième champ de saisie et appuyez sur la touche ENTER , vous recevrez l'alerte "formulaire soumis" et jamais l'alerte "enter key". Déplacer le champ de saisie hors des balises de formulaire vous donne l'alerte «clé d'entrée». Comment puis-je recevoir cette alerte même lorsque ce champ se trouve dans les balises de formulaire. Fondamentalement, il doit se déclencher avant l'envoi du formulaire d'alerte.

javascript html dom-events

0 commentaires

3 Réponses :

0
votes

Votre événement onsubmit est prioritaire car vous n'écoutez pas un événement keydown mais un keyup .

Cela devrait faire ce dont vous avez besoin:

document.querySelector('#textfield2').onkeydown = (e) => {
  e.preventDefault();
  if (e.keyCode == 13) {
    alert('enter key')
  }
}

0 commentaires

4
votes

Cochez onkeydown au lieu de onkeyup

document.querySelector('#textfield2').onkeydown = (e) => {
  if (e.keyCode == 13) {
    alert('enter key')
  }
}

document.querySelector('form').onsubmit = (e) => {
  e.preventDefault();
  alert('form submitted');
}

Remarque: j'ai également supprimé e.preventDefault () à partir de l'événement onkeydown afin que le formulaire soit effectivement soumis par la suite.

Codepen mis à jour: https://codepen.io/tkpop777/pen/vYYVBOe

0 commentaires

0
votes

Vous n'empêchez pas votre bouton de soumettre le formulaire, c'est pourquoi cela se produit. Par défaut, lorsque vous appuyez sur Entrée, le bouton de votre formulaire est déclenché et le formulaire est envoyé.

ajoutez simplement ceci

document.querySelector('button').onclick = (e) => {
  e.preventDefault();
}

0 commentaires