Comment soumettre un formulaire lorsque l'on appuie sur la touche retour ?

Question

Quelqu'un peut-il me dire comment soumettre un formulaire HTML lorsque la touche retour est pressée et qu'il n'y a pas de boutons dans le formulaire ? Le bouton de soumission n'est pas présent . J'utilise une div personnalisée à la place.

Answer 1

Pour soumettre le formulaire lorsque vous appuyez sur la touche Entrée, créez une fonction javascript comme suit.

function checkSubmit(e) {
   if(e && e.keyCode == 13) {
      document.forms[0].submit();
   }
}

Ensuite, ajoutez l'événement à la portée dont vous avez besoin, par exemple sur la balise div :

<div onKeyPress="return checkSubmit(event)"/>

C'est également le comportement par défaut d'Internet Explorer 7 (et probablement aussi des versions antérieures).

Answer 2

IMO, c'est la réponse la plus propre :

<form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input type="submit" style="display:none"/>
</form>

Mieux encore, si vous utilisez le javascript pour soumettre le formulaire à l'aide de la div personnalisée, vous devez également utiliser le javascript pour la créer et pour définir le style display:none sur le bouton. Ainsi, les utilisateurs dont le javascript est désactivé verront toujours le bouton de soumission et pourront cliquer dessus.

---

Il a été noté que l'affichage:none conduit IE à ignorer l'entrée. J'ai créé un nouvel exemple de JSFiddle qui commence par un formulaire standard et utilise l'amélioration progressive pour masquer l'option de soumission et créer la nouvelle div. J'ai utilisé le style CSS de StriplingWarrior .

Answer 3

J'ai essayé diverses stratégies basées sur javascript/jQuery, mais j'ai toujours rencontré des problèmes. Le dernier problème en date concernait la soumission accidentelle lorsque l'utilisateur utilise la touche "Entrée" pour effectuer une sélection dans la liste de saisie automatique intégrée au navigateur. J'ai finalement opté pour cette stratégie, qui semble fonctionner sur tous les navigateurs pris en charge par mon entreprise :

<div class="hidden-submit"><input type="submit" tabindex="-1"/></div>

.hidden-submit {
    border: 0 none;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

Cette réponse est similaire à la réponse actuellement acceptée par Chris Marasti-Georg, mais en évitant d'avoir recours aux display: none Il semble fonctionner correctement sur tous les navigateurs.

Mise à jour

J'ai modifié le code ci-dessus pour y inclure une valeur négative tabindex afin de ne pas capturer la touche de tabulation. Bien que cela ne soit techniquement pas validé en HTML 4, la spécification HTML5 inclut un langage qui permet de le faire fonctionner de la manière dont la plupart des navigateurs l'implémentaient déjà de toute façon.

Answer 4

Utiliser le <button> étiquette. Extrait de la norme W3C :

Les boutons créés avec l'élément BUTTON fonctionnent comme les boutons créés avec l'élément INPUT, mais ils offrent des possibilités de rendu plus riches : l'élément BUTTON peut avoir un contenu. Par exemple, un élément BUTTON qui contient une image fonctionne comme et peut ressembler à un élément INPUT dont le type est défini sur "image", mais le type de l'élément BUTTON autorise le contenu.

En fait, il y a une autre étiquette, <button> qui ne nécessite pas de javascript qui peut également soumettre un formulaire. Il peut être stylisé de la même manière qu'un <div> (y compris <img /> à l'intérieur de la balise du bouton). Les boutons de la balise <input /> ne sont pas aussi flexibles.

<button type="submit">
    <img src="my-icon.png" />
    Clicking will submit the form
</button>

Il y a trois types d'installation sur le <button> ; ils correspondent à la <input> types de boutons.

<button type="submit">Will submit the form</button>
<button type="reset">Will reset the form</button>
<button type="button">Will do nothing; add javascript onclick hooks</button>

Normes

• Wiki du W3C sur <button>
• HTML5 <button>
• HTML4 <button>

J'utilise <button> étiquettes avec css-sprites et un peu de css Le style pour obtenir des boutons de formulaire colorés et fonctionnels. Notez qu'il est possible d'écrire des css pour, par exemple, <a class="button"> Les liens partagent le style avec l'équipe de la <button> élément.

Answer 5

Voici comment je procède avec jQuery

j(".textBoxClass").keypress(function(e)
{
    // if the key pressed is the enter key
    if (e.which == 13)
    {
        // do work
    }
});

Le problème est qu'il faut vérifier si l'argument de pression de touche est "13", ce qui correspond à la touche Entrée.