Envoi d’un formulaire en appuyant sur Entrée sans bouton de soumission

Eh bien, j’essaie de soumettre un formulaire en appuyant sur Entrée, mais sans afficher un bouton d’envoi. Je ne veux pas entrer en JavaScript si possible, car je veux que tout fonctionne sur tous les navigateurs (la seule façon dont JS est au courant des événements).

En ce moment, le formulaire ressemble à ceci:


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

Quelqu’un peut-il suggérer une meilleure méthode? Ou est-ce à peu près aussi bon que ça?

Essayer:

  

Cela poussera le bouton vers la gauche, hors de l’écran. La bonne chose est que vous obtiendrez une dégradation en douceur lorsque le CSS est désactivé.

Mise à jour – Solution de contournement pour IE7

Comme suggéré par Bryan Downing + avec le tabindex pour empêcher la tabulation d’atteindre ce bouton (par Ates Goral):

  

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

  

Avez-vous essayé cela?

  

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

Une autre solution sans le bouton de soumission:

HTML

 

jQuery

 $(document).ready(function() { $('.submit_on_enter').keydown(function(event) { // enter has keyCode = 13, change it if you want to use another button if (event.keyCode == 13) { this.form.submit(); return false; } }); }); 

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

  

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

Pour toute personne qui étudie cette réponse à l’avenir, HTML5 implémente un nouvel atsortingbut pour les éléments de formulaire, hidden , qui applique automatiquement l’ display:none à votre élément.

par exemple

  

Au lieu du hack que vous utilisez actuellement pour masquer le bouton, il serait beaucoup plus simple de définir la visibility: collapse; dans l’atsortingbut de style. Cependant, je recommande toujours d’utiliser un peu de Javascript simple pour soumettre le formulaire. Pour autant que je sache, le soutien à de telles choses est omniprésent de nos jours.

Il suffit de définir l’atsortingbut masqué sur true:

 

IE ne permet pas d’appuyer sur la touche ENTRÉE pour l’envoi du formulaire si le bouton Soumettre n’est pas visible et que le formulaire comporte plusieurs champs. Donnez-lui ce qu’il veut en fournissant une image transparente de 1 x 1 pixel en tant que bouton d’envoi. Bien sûr, cela prendra un pixel de la mise en page, mais regardez ce que vous devez faire pour le cacher.

  

La manière la plus élégante de le faire est de conserver le bouton submit, mais définissez la bordure, le remplissage et la taille de la police sur 0.

Cela fera les dimensions du bouton 0x0.

  

Vous pouvez essayer cela vous-même et en définissant un contour à l’élément, vous verrez un point, qui est la bordure extérieure “entourant” l’élément 0x0 px.

Pas besoin de visibilité: caché, mais si cela vous fait dormir la nuit, vous pouvez aussi le jeter dans le mélange.

JS Fiddle

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

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

le plus simple

  

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; } 

Vous pouvez essayer aussi cette

  

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

Je l’ai ajouté à une fonction sur un document prêt. S’il n’y a pas de bouton Envoyer sur le formulaire (tous mes formulaires de dialog Jquery n’ont pas de bouton d’envoi), ajoutez-le.

 $(document).ready(function (){ addHiddenSubmitButtonsSoICanHitEnter(); }); function addHiddenSubmitButtonsSoICanHitEnter(){ var hiddenSubmit = ""; $("form").each(function(i,el){ if($(this).find(":submit").length==0) $(this).append(hiddenSubmit); }); } 
  

Cela fonctionne bien et c’est la version la plus explicite de ce que vous essayez de réaliser.

Notez qu’il existe une différence entre display:none et visibility:hidden pour les autres éléments de formulaire.

J’ai utilisé

 < input class="hidden" type="submit" value="" onclick="document.getElementById('loginform').submit()"; /> 

et

  .hidden { border:0; padding:0; font-size:0; width: 0px; height: 0px; } 

dans le fichier .css. Cela a fonctionné comme par magie pour moi aussi. 🙂

Solution HTML5