Comment envoyer des formulaires avec la touche Entrée sans un bouton de soumission

J'ai jQuery aller tous les boutons soumettre avec le bouton de classe, et les transformer chacun en un élément d'ancrage avec le bouton de classe.Comment envoyer des formulaires avec la touche Entrée sans un bouton de soumission

$("input.button").each(function(i) { 

    var anchorButton = $("<a class='"+this.className+"' href='#'>"+this.value+"</a>") 



    anchorButton.click(function(eventObject) { 

     $(this).blur().prev("input.hidden").click(); 

     return false; 

    }); 



    $(this) 

     .after(anchorButton) 

     .addClass("hidden") 

     .removeClass("button pill-left pill-center pill-right"); 

});

Je peux ensuite mettre en forme l'élément d'ancrage avec CSS, cross-browser-ly. Il n'y a qu'un problème. Chaque fois que j'appuie sur la touche Entrée sur les éléments d'entrée de formulaire, le formulaire n'est pas envoyé. Cependant, si je décoche le bouton Soumettre, cela fonctionne à nouveau. En conclusion, je ne peux pas obtenir la clé Entrée/Retour pour soumettre le formulaire sauf si j'ai un bouton de soumission visible (affichage! = Aucun).

Comment puis-je soumettre le formulaire lorsque j'appuie sur Entrée lorsque le bouton de soumission est masqué?

Source

2010-08-22 Sam

puis-je comme pourquoi vous transformez les boutons de soumission du formulaire en ancres? – Ben

La raison pour laquelle j'ai changé les éléments d'entrée [type = submit] en ancres est que je peux les styliser et contourner les caprices d'Internet Explorer sur les éléments des boutons. – Sam

$("input.button").keydown(function(event) { 
    if(event.keyCode == 13) 
     $("...find the form...").submit(); 
});

Cela devrait fonctionner.

Si elle ne cherche pas:

$("..find the input button you hide..").css('position', 'absolute') 
     .css('top', '-1000px');

Cela vaut mieux que les solutions proposées visibility: hidden car si vous réglez la visibilité sur le bouton caché sera toujours « prendre de l'espace ».

Source

2010-08-22 19:39:01

Okay admis - bien que la question spécifiquement demandé de cacher le bouton soumettre :) –

@Roopesh: La question était de savoir comment faire le formulaire en appuyant sur la touche Entrée lorsque le bouton * submit était déjà caché *. – Stian

True la propriété CSS de visibilité n'est pas appropriée. J'ai déjà le code qui soumet le formulaire lorsque j'appuie sur l'élément d'ancrage. Ce dont j'ai besoin, c'est de garder le comportement par défaut de la touche Entrée sur les éléments d'entrée [type = text]. Je suppose que ma solution serait d'utiliser le positionnement absolu au lieu de la propriété d'affichage. Je vais essayer. – Sam

-1

Avez-vous essayé de changer la visibilité en caché au lieu d'afficher à aucun?

Source

2010-08-22 19:35:42

même je pense que cela devrait fonctionner - vous me battre à: D –

-1

Essayez la visibilité = caché

Source

2010-08-22 19:37:19

Utilisez simplement un form ordinaire dans votre code HTML, y compris un attribut de soumission action. Ensuite, vous obtiendrez le comportement par défaut du navigateur et en appuyant sur Entrez dans le formulaire le soumettra. Vous n'avez alors plus besoin d'utiliser jQuery pour lier les gestionnaires d'événements à tous vos boutons d'envoi. Vous pouvez tester avec JSBin.

Source

2010-08-22 19:39:03

Comment envoyer des formulaires avec la touche Entrée sans un bouton de soumission

Répondre

Questions connexes