web-dev-qa-db-fra.com

Cliquez sur le bouton Entrer déclencheurs

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

Je ne trouve rien qui ressemble à un moyen fiable de régler le bouton par défaut, et je ne le souhaite pas nécessairement pour le moment. En l'absence de quelque chose de mieux, j'ai capturé une touche du clavier n'importe où sur le formulaire et, si c'était la touche <Enter> qui était enfoncée, je le nie simplement:

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

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

Pour autant que je sache, cela semble fonctionner, mais il est incroyablement compact.

Est-ce que quelqu'un connaît une technique plus sophistiquée pour le faire?

De même, y a-t-il des pièges à cette solution dont je ne suis tout simplement pas au courant?

Merci.

javascriptjqueryhtmlformsenter
140
Rob Wilkerson

En utilisant

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

devrait faire l'affaire.

La raison en est qu'un bouton dans un formulaire a son type implicitement défini sur submit. Comme l'indique zzzzBoz, la spécification indique que la première button ou input avec type="submit" est ce qui est déclenché dans cette situation. Si vous définissez spécifiquement type="button", le navigateur le supprime.

309
Maddog

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

La spécification HTML5 indique explicitement ce qui se passe dans implicit submissions :

Le bouton par défaut d'un élément de formulaire est le premier bouton d'envoi dans l'ordre de l'arborescence dont le propriétaire du formulaire est cet élément.

Si l'agent utilisateur prend en charge le fait de permettre à l'utilisateur de soumettre un formulaire implicitement (par exemple, sur certaines plates-formes, appuyer sur la touche "Entrée" lorsqu'un champ de texte est activé de manière implicite), le faire pour un formulaire dont le bouton par défaut est activé comportement doit obliger l'agent utilisateur à exécuter des étapes d'activation de clic synthétique sur ce bouton par défaut.

Cela n'a pas été explicité dans la spécification HTML4, cependant les navigateurs ont déjà implémenté ce qui est décrit dans la spécification HTML5 (c'est pourquoi il est explicitement inclus).

Modifier pour ajouter:

La réponse la plus simple à laquelle je puisse penser est de placer votre bouton d'envoi en tant que premier élément [type="submit"] du formulaire, d'ajouter un rembourrage au bas du formulaire avec css et de positionner absolument le bouton d'envoi en bas à l'endroit souhaité.

49
zzzzBov

Je ne pense pas que vous ayez besoin de javascript ou de CSS pour résoudre ce problème.

Selon la spécification html 5 des boutons , un bouton sans attribut type est traité de la même manière qu’un bouton dont le type est défini sur "submit", c’est-à-dire comme un bouton permettant de soumettre son formulaire. Définir le type de bouton sur "bouton" devrait empêcher le comportement que vous observez.

Je ne suis pas sûr de la prise en charge de ce navigateur par le navigateur, mais le même comportement a été spécifié dans la spécification html 4.01 pour les boutons donc je suppose que c'est assez bon.

19
Leinster

En appuyant sur 'Entrée' sur le <input type="text"> ciblé, vous déclenchez l'événement 'clic' sur le premier élément positionné: <button> ou <input type="submit">. Si vous appuyez sur 'Entrée' dans <textarea>, vous créez simplement une nouvelle ligne de texte.

Voir l'exemple ici .

Votre code empêche de créer une nouvelle ligne de texte dans <textarea>, vous devez donc appuyer sur la touche uniquement pour <input type="text">.

Mais pourquoi devez-vous appuyer sur Enter dans le champ de texte? Si vous souhaitez soumettre un formulaire en appuyant sur 'Entrée', mais que le <button> doit rester le premier de la présentation, il vous suffit de jouer avec le balisage: placez le code <input type="submit"> avant le <button> et utilisez CSS pour enregistrer la présentation souhaitée.

Saisir 'Entrée' et enregistrer le 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`*/
});
9
Feniks502

Vous pouvez utiliser javascript pour bloquer la soumission de formulaires jusqu'au moment opportun. Un exemple très grossier:

<form onsubmit='return false;' id='frmNoEnterSubmit' action="index.html">

    <input type='text' name='txtTest' />

    <input type='button' value='Submit' 
        onclick='document.forms["frmNoEnterSubmit"].onsubmit=""; document.forms["frmNoEnterSubmit"].submit();' />

</form>

Si vous appuyez sur Entrée, le formulaire est toujours envoyé, mais le javascript l'empêche de le soumettre jusqu'à ce que vous appuyiez sur le bouton.

2
Dave

En appuyant sur entrer dans le champ de texte d'un formulaire, le formulaire sera envoyé par défaut. Si vous ne voulez pas que cela fonctionne de cette façon, vous devez capturer la touche Entrée et la consommer comme vous l'avez fait. Il n'y a pas moyen de contourner cela. Cela fonctionnera de cette façon même s'il n'y a pas de bouton présent dans le formulaire.

1
Sparafusile

Partout où vous utilisez un élément <button> par défaut, il considère ce bouton type="submit". Ainsi, si vous définissez le bouton type="button", il ne considérera pas ce <button> comme un bouton d'envoi.

0
Ramki

Exemple de dom

  <button onclick="anotherFoo()"> Add new row</button>
  <input type="text" name="xxx" onclick="foo(event)">

javascript

function foo(event){
   if(event.which == 13 || event.keyCode == 13) // for crossbrowser
   {
     event.preventDefault(); // this code prevents other buttons triggers use this
     // do stuff
   }
}

function anotherFoo(){
  // stuffs.
}

si vous n'utilisez pas preventDefault (), d'autres boutons se déclencheront.

0
Mehmet Kus

Je le ferais comme suit: Dans le gestionnaire de l'événement onclick du bouton (pas d'envoi), vérifiez le code d'activation de l'objet événement. Si c'est "entrer" je retournerais faux.

0
Satyajit

Ma situation comporte deux boutons Submit dans l'élément de formulaire: Update et Delete. Le bouton Delete supprime une image et le bouton Update met à jour la base de données avec les champs de texte du formulaire.

Étant donné que le bouton Delete était le premier du formulaire, il s'agissait du bouton par défaut de la clé Enter. Pas ce que je voulais. L'utilisateur s'attendrait à pouvoir appuyer sur Enter après avoir modifié certains champs de texte.

J'ai trouvé ma réponse à définir le bouton par défaut ici :

<form action="/action_page.php" method="get" id="form1">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
</form>
<button type="submit" form="form1" value="Submit">Submit</button>

Sans utiliser de script, j'ai défini la forme à laquelle chaque bouton appartient en utilisant l'attribut <button> form="bla". Je règle le bouton Delete sur un formulaire inexistant et le bouton Update que je voulais déclencher sur la touche Enter au formulaire dans lequel l'utilisateur se trouverait lors de la saisie de texte.

C'est la seule chose qui a fonctionné pour moi jusqu'à présent.

0
Dan Vachon