Cliquez sur le bouton Entrer déclencheurs

Question

J'ai une page avec deux boutons. L'un est un <button> élément et l'autre est un <input type="submit">. Les boutons apparaissent sur la page, dans l'ordre. Si je suis dans un champ de texte n'importe où dans le formulaire et appuyez sur <Enter>, le bouton de l'élément click événement est déclenché. Je suppose que c'est parce que l'élément de bouton se trouve d'abord.

Je ne peux pas trouver quelque chose qui ressemble à un moyen fiable de réglage du bouton par défaut et je n'ai pas forcément envie à ce point. En l'absence de quelque chose de mieux, j'ai capturé une pression de touche n'importe où sur le formulaire, et si c'était l' <Enter> touche qui a été pressée, je suis juste en la niant:

$('form').keypress( function( e ) {
  var code = e.keyCode || e.which;

  if( code === 13 ) {
    e.preventDefault();
    return false; 
  }
})

Aussi loin que je peux dire à ce jour, il semble fonctionner, mais il se sent incroyablement jambon-fisted. Personne ne sait d'une technique plus sophistiquée pour ce faire? De même, existe-il des inconvénients de cette solution que je ne suis pas au courant?

Merci.

Answer 1

En utilisant

 <button type="button">Whatever</button>
 

devrait faire l'affaire

Answer 2

Il est important de lire les spécifications HTML pour vraiment comprendre ce comportement est attendu:

La spec HTML5 stipule explicitement ce qui se passe dans implicit submissions:

Les agents utilisateurs peuvent établir un bouton dans chaque forme comme la forme du bouton par défaut. Ce devrait être le premier bouton de validation de l'arbre de commande, dont la propriétaire est que l'élément de formulaire, mais les agents utilisateur peut choisir un autre bouton si un autre serait plus approprié pour la plate-forme. Si la plate-forme prend en charge permettant à l'utilisateur de soumettre un formulaire implicitement (par exemple, sur certaines plates-formes de frapper la touche "entrée" tout en un champ de texte est centré implicitement soumet le formulaire), puis de le faire doit faire en sorte que la forme par défaut du bouton d'activation du comportement, le cas échéant, à être exécuté.

Ce n'était pas explicite dans le HTML4 spec, cependant, les navigateurs ont déjà été mise en œuvre de ce qui est décrit dans la spec HTML5 (qui est pourquoi il est inclus de manière explicite).

Modifier pour ajouter:

La réponse la plus simple je pense est de mettre votre bouton soumettre comme la première [type="submit"] élément dans le formulaire, ajouter le remplissage vers le bas de la forme avec css, et absolument position sur le bouton soumettre au bas où vous le souhaitez.

Answer 3

Je ne pense pas que vous avez besoin de javascript ou CSS pour corriger cela.

Selon le html 5 de spécifications pour les boutons un bouton sans l'attribut type est traité de la même façon qu'un bouton avec son jeu de type "soumettre", c'est à dire comme un bouton de soumission de formulaire. Réglage du bouton de type "bouton" qui devrait éviter le comportement que vous vous voyez.

Je ne suis pas sûr de prise en charge du navigateur, mais le même comportement a été spécifié dans le code html 4.01 spec pour les boutons j'attends donc il est assez bon.

Answer 4

En appuyant sur la touche "Entrer" de concentré <input type="text"> de déclencher un "clic" de l'événement sur le premier élément positionné: <button> ou <input type="submit">. Si vous appuyez sur "Entrer" dans <textarea>, vous venez de faire une nouvelle ligne de texte.

Voir l'exemple ici.

Votre code empêche de faire une nouvelle ligne de texte en <textarea>, de sorte que vous avez à les attraper touche uniquement pour <input type="text">.

Mais pourquoi avez-vous besoin d'appuyer sur Enter dans le champ de texte? Si vous souhaitez soumettre le formulaire en appuyant sur "Enter", mais l' <button> doit rester la première dans la mise en page, il suffit de jouer avec le balisage: mettre la <input type="submit"> code avant de l' <button> et utiliser les CSS pour enregistrer la mise en page dont vous avez besoin.

La capture de 'Enter' et l'enregistrement de balisage:

$('input[type="text"]').keypress(function (e) {
    var code = e.keyCode || e.which;
    if (code === 13)
    e.preventDefault();
    $("form").submit(); /*add this, if you want to submit form by pressing `Enter`*/
});

Answer 5

L'évidence écueil est multi-ligne, <textarea>'s où vous ne pouvez plus insérer un saut de ligne, le rendant de ce fait une seule ligne de l'élément d'entrée.

La bonne façon de résoudre cela n'implique pas que le javascript à tous, juste quelques modifications de mise en page et le style.

Vous avez besoin de modifier le DOM du l'ordre des boutons. Toute autre manière de résoudre ce est contre le navigateur au lieu d'avec elle, et c'est une des imbéciles de courses.

Il n'a pas à la ruine de la mise en page. L'ordre des boutons ne doit être changé dans les DOM/balisage, pas dans le rendu de la mise en page - utiliser le positionnement flottant ou à faire la mise en page que vous voulez, indépendant de l'ordre de la touche éléments.

Si vous avez de la difficulté à comprendre comment, laissez-moi savoir et je vais vous donner un coup de main ;)