Créer une clé de saisie sur un formulaire HTML au lieu d’activer le bouton

J’ai un formulaire HTML avec une seule entrée de submit , mais aussi divers éléments de button . Lorsque l’utilisateur appuie sur la touche «Entrée», je m’attends à ce qu’il soumette effectivement le formulaire, mais à la place (dans Chrome 15 au moins), je trouve qu’il déclenche le premier button (puisque cela se produit plus tôt dans le HTML que submit entrée, je suppose).

Je sais qu’en général vous ne pouvez pas forcer les navigateurs à privilégier une entrée de submit particulière, mais je pensais vraiment qu’ils préféreraient les entrées de submit sur les éléments de button . Puis-je modifier le code HTML pour que cela fonctionne, ou devrais-je adopter une approche Javascript?

Voici une maquette brute du HTML:

 

Vous pouvez utiliser jQuery:

 $(function() { $("form input").keypress(function (e) { if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { $('button[type=submit] .default').click(); return false; } else { return true; } }); }); 

Vous n’avez pas besoin de JavaScript pour choisir votre bouton ou entrée de soumission par défaut. Il suffit de marquer avec type="submit" , et les autres boutons les marquent avec type="button" . Dans votre exemple:

   

Essayez ceci, si la touche Entrée a été pressée, vous pouvez la capturer comme ceci, par exemple, j’ai développé une réponse à l’autre bouton html spécifié , voir si cela aide.

Spécifiez le nom des formulaires, par exemple yourFormName vous devriez alors pouvoir soumettre le formulaire sans vous concentrer sur le formulaire.

 document.onkeypress = keyPress; function keyPress(e){ var x = e || window.event; var key = (x.keyCode || x.which); if(key == 13 || key == 3){ // myFunc1(); document.yourFormName.submit(); } } 

J’ai juste un problème avec ça. Le mien était une chute de changer l’ input sur un button et j’avais un terminateur de tag mal écrit /> :

Donc j’ai eu:

 Login 

Et viens de le modifier pour:

  

Maintenant fonctionne comme un charme, toujours les petites choses ennuyeuses … HTH

Etant donné qu’il n’y a qu’un seul bouton (ou avec cette solution potentiellement pas même un), voici la solution basée sur jQuery qui fonctionnera pour plusieurs formulaires sur la même page …

  

Je viens de donner un tourbillon à la fois dans Chrome et Firefox et IE10.

Comme mentionné ci-dessus – assurez-vous que vous avez bien marqué avec type = “button”, “reset”, “submit”, etc. pour vous assurer qu’il fonctionne correctement et choisit le bon bouton.

Peut-être aussi les mettre tous sous la même forme (c.-à-d. Tout ce qui a fonctionné pour moi)

 $("form#submit input").on('keypress',function(event) { event.preventDefault(); if (event.which === 13) { $('button.submit').sortinggger('click'); } });