Soumettre un formulaire en appuyant sur enter sans bouton Soumettre

je pense que vous devrait aller le Javascript de la route, ou, au moins, je serais:

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

Avez-vous essayé ?

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

puisque la plupart des navigateurs comprennent visibility:hidden et il ne fonctionne pas vraiment comme display:none , je devine qu'il devrait être très bien, cependant. Je ne l'ai pas vraiment testé moi-même, donc CMIIW.

une autre solution sans le bouton Soumettre:

HTML

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

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

});

utiliser le code suivant, ce qui a corrigé 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"/>

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

pour toute personne regardant cette réponse à l'avenir, HTML5 implémente un nouvel attribut pour les éléments de forme, hidden , qui s'appliquera automatiquement display:none à votre élément.

p.ex.

<input type="submit" hidden />

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

il suffit de définir l'attribut caché à 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>

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

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

la façon la plus élégante de faire ceci est de garder le bouton Soumettre, mais réglez sa bordure, son rembourrage et sa taille de police à 0.

cela fera les dimensions du bouton 0x0.

<input type="submit" style="border:0; padding:0; font-size:0">

vous pouvez essayer vous-même, et en mettant 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ée, mais si elle vous fait dormir la nuit, vous pouvez jeter que dans le mélange ainsi.

js Fiddle

c'est ma solution, testée en Chrome, Firefox 6 et IE7+:

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

la manière la plus simple

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

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 ceci

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

vous pouvez inclure une image avec width / height = 0 px

Je l'ai ajouté à une fonction Sur document ready. S'il n'y a pas de bouton Soumettre sur le formulaire (tous mes formulaires de dialogue Jquery n'ont pas de boutons soumettre), 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);
    });
}

<input type="submit" style="display:none;"/>

cela fonctionne très bien et c'est la version la plus explicite de ce que vous essayez de réaliser.

noter qu'il y a une différence entre display:none et visibility:hidden pour les autres éléments de forme.

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. Ça a marché comme par magie pour moi aussi. :)

HTML5 solution

<input type="submit" hidden />