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

Vous pouvez également essayer ceci

<INPUT TYPE="image" SRC="0piximage.gif" HEIGHT="0" WIDTH="0" BORDER="0">

Vous pouvez inclure une image avec largeur/hauteur = 0 px.

Answer 2

Pour ceux qui ont des problèmes avec IE et pour les autres aussi.

{
    float: left;
    width: 1px;
    height: 1px;
    background-color: transparent;
    border: none;
}

Answer 3

Je ne vois aucune raison de masquer le bouton d'envoi. Cela ne semble pas être une bonne idée du point de vue de la convivialité.

Answer 4

Je l'ai ajouté à une fonction sur le document prêt. S'il n'y a pas de bouton de soumission sur le formulaire (tous mes formulaires Jquery Dialog n'ont pas de boutons de soumission), ajoutez-le.

$(document).ready(function (){
    addHiddenSubmitButtonsSoICanHitEnter();
});
function addHiddenSubmitButtonsSoICanHitEnter(){
    var hiddenSubmit = "<input type='submit' style='position: absolute; left: -9999px; width: 1px; height: 1px;' tabindex='-1'/>";
    $("form").each(function(i,el){
        if($(this).find(":submit").length==0)
            $(this).append(hiddenSubmit);
    });
}

Answer 5

Essayez cette fonction js : soumission rapide :

Il vous suffit d'ajouter enterable_form à la classe <form> et vous êtes prêt ;)