Soumettre un formulaire en appuyant sur enter sans bouton Soumettre

Eh bien, j'essaie de soumettre un formulaire en appuyant sur enter mais sans afficher un bouton Soumettre. Je ne veux pas entrer dans JavaScript si possible car je veux que tout fonctionne sur tous les navigateurs (la seule façon JS que je connais est avec les événements).

en ce moment la forme 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>

qui marche plutôt bien. Le bouton Soumettre fonctionne lorsque l'utilisateur appuie sur Entrer, et le bouton ne s'affiche pas dans Firefox, i.e., Safari, Opera et Chrome. Cependant, je n'aime toujours pas la 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 aussi bon qu'il obtient?

280
demandé sur abatishchev 2009-01-25 16:34:16
la source

18 ответов

, Essayez:

<input type="submit" style="position: absolute; left: -9999px"/>

qui poussera le bouton waaay vers la gauche, hors de l'écran. Ce qui est bien avec ça, c'est que vous obtiendriez une dégradation gracieuse quand CSS est désactivé.

mise à Jour - solution de Contournement pour IE7

comme suggéré par Bryan Downing + avec tabindex pour empêcher tab d'atteindre ce bouton (par Ates Goral):

<input type="submit" 
       style="position: absolute; left: -9999px; width: 1px; height: 1px;"
       tabindex="-1" />
215
répondu Ates Goral 2015-06-21 13:25:38
la source

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>
85
répondu strager 2013-09-19 05:22:31
la source

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.

74
répondu andyk 2009-01-25 23:39:07
la source

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

});
23
répondu damoiser 2016-10-26 18:11:06
la source

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.

13
répondu Mayank Gupta 2012-01-31 03:16:49
la source

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 />
10
répondu Panomosh 2017-04-04 17:34:09
la source

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.

7
répondu Noldorin 2009-01-25 16:43:05
la source

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>
6
répondu jumpnett 2013-04-03 19:34:50
la source

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"/>
5
répondu Winston Tamblyn 2014-06-13 03:55:02
la source

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

5
répondu Waltur Buerk 2016-06-20 18:01:13
la source

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

.hidden{
    height: 1px;
    width: 1px;
    position: absolute;
    z-index: -100;
}
4
répondu vjnrv 2011-10-02 02:00:44
la source

la manière la plus simple

<input type="submit" style="width:0px; height:0px; opacity:0;"/>
3
répondu Shahin Mammadzada 2013-09-22 21:47:30
la source

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;
}
2
répondu Jekis 2010-11-11 00:39:54
la source

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

2
répondu waney 2014-06-13 21:00:30
la source

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);
    });
}
0
répondu seePatCode 2013-03-27 18:58:56
la source
<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.

0
répondu Shammoo 2017-03-30 03:34:20
la source

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. :)

0
répondu Mihai Savin 2017-09-21 19:44:52
la source

HTML5 solution

<input type="submit" hidden />
0
répondu Andrew Luca 2018-08-14 14:01:54
la source

Autres questions sur