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

Il suffit de mettre l'attribut "hidden" à true :

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

Answer 2

Au lieu du hack que vous utilisez actuellement pour masquer le bouton, il serait beaucoup plus simple de définir visibility: collapse; dans l'attribut de style. Cependant, je recommande toujours d'utiliser un peu de Javascript simple pour soumettre le formulaire. D'après ce que j'ai compris, le support pour ce genre de choses est omniprésent de nos jours.

Answer 3

IE ne permet pas d'appuyer sur la touche ENTRÉE pour soumettre un formulaire si le bouton d'envoi n'est pas visible et que le formulaire comporte plus d'un champ. Donnez-lui ce qu'il veut en fournissant une image transparente de 1x1 pixel comme bouton d'envoi. Bien sûr, il occupera un pixel de la mise en page, mais regardez ce que vous devez faire pour le cacher.

<input type="image" src="img/1x1trans.gif"/>

Answer 4

Voici ma solution, testée dans Chrome, Firefox 6 et IE7+ :

.hidden{
    height: 1px;
    width: 1px;
    position: absolute;
    z-index: -100;
}

Answer 5

La manière la plus simple

<input type="submit" style="width:0px; height:0px; opacity:0;"/>