Soumission d'un formulaire en appuyant sur la touche Entrée sans bouton de soumission

Question

J'essaie de soumettre un formulaire en appuyant sur la touche Entrée mais sans afficher de bouton de soumission. Je ne veux pas entrer dans le JavaScript si possible puisque je veux que tout fonctionne sur tous les navigateurs (le seul moyen JS que je connaisse est avec les événements).

Actuellement, le formulaire ressemble à ceci :

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" style="height: 0px; width: 0px; border: none; padding: 0px;" hidefocus="true" />
</form>

Ce qui fonctionne plutôt bien. Le bouton d'envoi fonctionne lorsque l'utilisateur appuie sur la touche Entrée, et le bouton ne s'affiche pas dans Firefox, IE, Safari, Opera et Chrome. Cependant, je n'aime toujours pas cette solution car il est difficile de savoir si elle fonctionnera sur toutes les plateformes avec tous les navigateurs.

Quelqu'un peut-il suggérer une meilleure méthode ? Ou est-ce que cette méthode est aussi bonne que possible ?

Answer 1

Essayez :

<input type="submit" style="position: absolute; left: -9999px"/>

Cela poussera le bouton bien plus à gauche, hors de l'écran. Ce qui est bien avec ça, c'est que vous aurez une dégradation progressive quand les CSS seront désactivées.

Mise à jour - Solution de contournement pour IE7

Comme suggéré par Bryan Downing :

<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>

Answer 2

Je pense que vous devrait aller sur la route Javascript, ou du moins je le ferais :

<script type="text/javascript">
// Using jQuery.

$(function() {
    $('form').each(function() {
        $(this).find('input').keypress(function(e) {
            // Enter pressed?
            if(e.which == 10 || e.which == 13) {
                this.form.submit();
            }
        });

        $(this).find('input[type=submit]').hide();
    });
});
</script>

<form name="loginBox" target="#here" method="post">
    <input name="username" type="text" /><br />
    <input name="password" type="password" />
    <input type="submit" />
</form>

Answer 3

Avez-vous essayé ceci ?

<input type="submit" style="visibility: hidden;" />

Comme la plupart des navigateurs comprennent visibility:hidden et cela ne fonctionne pas vraiment comme display:none Je suppose que ça devrait être bon, cependant. Je ne l'ai pas vraiment testé moi-même, donc CMIIW.

Answer 4

Suivant la solution de @strager mais un peu plus simple, sans le bouton submit :

HTML

<form action="path_to_the_action">
  <input class="submit_on_enter" type="text" name="q" placeholder="Search...">
</form>

jQuery

<script type="text/javascript">
  $(document).ready(function() {
    $('.submit_on_enter').keydown(function(event) {
        if (event.keyCode == 13) {
            this.form.submit();
            return false;
         }
    });
  });
</script>

Answer 5

Utilisez le code suivant, cela a réglé mon problème dans les 3 navigateurs (FF, IE et Chrome) :

<input  type="submit" name="update" value=" Apply " 
    style="position: absolute; height: 0px; width: 0px; border: none; padding: 0px;"
    hidefocus="true" tabindex="-1"/>

Ajoutez la ligne ci-dessus comme première ligne dans votre code avec les valeurs appropriées de nom et de valeur.