Soumettre un formulaire en appuyant sur Entrée sans bouton Soumettre


322

Eh bien, j'essaie de soumettre un formulaire en appuyant sur Entrée mais sans afficher de bouton de soumission. 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 connaisse est avec les événements).

En ce moment, 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 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 plateformes avec tous les navigateurs.

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


7
Petit point qui pourrait raser quelques caractères de votre CSS et sera généralement effectué automatiquement comme minificateurs - vous n'avez pas besoin d'unités pour les mesures de longueur nulle. 0px = 0pt = 0em = 0em etc.
pwdst

@pwdst merci de l'avoir signalé - je viens du monde Python, donc "explicite vaut mieux qu'implicite", et vous vous demandez vraiment si c'est le cas en CSS, ou les créateurs CSS ont-ils un idiome différent?
ericmjl

2
Le zéro est l'exception à la règle ici @ericmjl - 0px == 0em == 0% == 0vh == 0vh etc. Dans d'autres mesures de longueur (non nulles), ce n'est pas seulement une mauvaise pratique mais contre les normes de ne pas spécifier d'unités et vous verrez un comportement différent dans les agents utilisateurs (navigateurs). Voir developer.mozilla.org/en-US/docs/Web/CSS/length et drafts.csswg.org/css-values-3/#lengths
pwdst

2
En cas de doute, mettez une unité de longueur explicite en d'autres termes.
pwdst

3
Bien que cela ne fasse certainement pas de mal d'ajouter l'unité avec 0, ne pas en avoir devrait être valide à 100% quelle que soit la langue, en fait tout le chemin du retour aux abstractions mathématiques. OTOH, une utilisation pratique d'avoir ou de ne pas les avoir est de transmettre le message si la propriété donnée est "vraiment destinée à être 0 et à rester ainsi" (pas d'unité), vs "cette chose se trouve être nulle maintenant, mais pourrait être ajusté au goût, ou quoi que ce soit ... "(avec unité).
Sz.

Réponses:


237

Essayer:

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

Cela poussera le bouton waaay vers la gauche, hors de l'écran. La bonne chose avec ceci est que vous obtiendriez une dégradation gracieuse lorsque CSS est désactivé.

Mise à jour - Solution de contournement pour IE7

Comme suggéré par Bryan Downing + avec tabindexpour empêcher l'onglet d'atteindre ce bouton (par Ates Goral):

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

9
Je viens d'essayer cette solution dans IE7 avec le même résultat que Erebus. Le code suivant le corrige:position: absolute; width: 1px; height: 1px; left: -9999px;
Bryan Downing

84
Quel horrible hack :( pourquoi le HTML est-il comme ça en premier lieu? Y a-t-il une bonne raison pour que enter ne fonctionne pas dans ce cas?
nornagon

28
@nornagon: Si vous pensez que ce hack est horrible, n'hésitez pas à en suggérer un moins horrible. Le HTML est ce qu'il est ...
Ates Goral

13
@MooseFactorytabindex="-1"
Ates Goral

14
"La bonne chose est ... une dégradation gracieuse lorsque CSS est désactivé"?! Je veux dire bien sûr, cela fonctionne très bien, mais la partie "dégradation gracieuse" n'est que des tactiques de marketing. Je n'en avais même pas entendu parler avant d'avoir trouvé cette page de l'année 2002 . C'est vrai, le seul résultat Google sur la première page pour "css est désactivé dans le navigateur" date d' il y a 10 ans (ou 7 étant donné que cette réponse a été mise en place en 2009).
Vicky Chijwani

97

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

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

6
belle, testée et fonctionne bien. Mais avant d'essayer quelque chose comme ça, rappelez-vous que la soumission d'un formulaire via Javascript ne fera pas en sorte que certains navigateurs proposent des trucs de sauvegarde de mot de passe.
andyk

3
Cela fera apparaître le bouton d'envoi pendant un moment (jusqu'à ce que la page se charge et que JS s'exécute).
nornagon

15
Une pression sur une touche est également déclenchée pour une sélection de la saisie semi-automatique, c'est-à-dire si l'utilisateur saisit une adresse e-mail et qu'il en sélectionne une précédemment donnée dans la saisie semi-automatique du navigateur en appuyant sur Entrée, votre formulaire sera soumis. Pas ce à quoi vos utilisateurs s'attendront.
cburgmer

2
Je suis passé à keydownpartir keypressd' un soutien plus large, mais vous devez également ajouter e.preventDefault();avant ifsi vous espérez soutenir Chrome.
Campbeln

1
@Campbeln que vous pourrez utiliser à la .on('keypress'...)place. Les documents pour .on()ressembler à cela font l' .preventDefault()appel pour vous.
jinglesthula

79

Avez-vous essayé cela?

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

Étant donné que la plupart des navigateurs comprennent visibility:hiddenet que cela ne fonctionne pas vraiment display:none, je suppose que cela devrait aller, cependant. Je ne l'ai pas vraiment testé moi-même, donc CMIIW.


3
il n'y a qu'une chose visibility: hidden: comme vous pouvez le lire dans w3schools , la visibilité: aucune n'affecte toujours la mise en page. Si vous voulez éviter cet espace, la solution au positionnement absolu me semble meilleure.
loybert

8
Vous pouvez combiner les deux solutions:<input type="submit" style="visibility: hidden; position: absolute;" />
VaclavSir

2
Merde, cela ne fonctionne pas dans IE8 (il ne soumet pas le formulaire), donc la solution ci-dessus gagne:position: absolute; left: -100px; width: 1px; height: 1px;
VaclavSir

31

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

});

1
Truc bizarre. Que vous transformiez votre bouton en zone de texte! Mais puisque l'astuce fonctionne pour tous les navigateurs, je vous ai crédité!
Jenna Leaf

merci @JennaLeaf ;-) Quoi qu'il en soit, je pense que ce n'est pas si étrange - beaucoup de formulaires en ligne utilisent comme soumettre simplement le «déclenchement» de la touche. Un exemple pourrait être la barre de recherche Google (peut-être qu'ils n'utilisent pas exactement ce code, mais probablement quelque chose de similaire).
damoiser

16

Pour quiconque examinera cette réponse à l'avenir, HTML5 implémente un nouvel attribut pour les éléments de formulaire hidden, qui s'appliquera automatiquementdisplay:none à votre élément.

par exemple

<input type="submit" hidden />

Bien qu'il semble fonctionner avec Chrome de bureau, il ne semble pas fonctionner avec Chrome ou Safari sur iPhone.
Ulf Adams

@UlfAdams Il fonctionne avec Chrome et Safari sur iPhone 12.1.2.
Matthew Campbell

13

Utilisez le code suivant, cela a résolu 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"/>

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


7

Au lieu du hack que vous utilisez actuellement pour masquer le bouton, il serait beaucoup plus simple de définir visibility: collapse;l'attribut style. Cependant, je recommanderais 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.


7

Définissez simplement l'attribut caché sur 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>

4
L'attribut masqué désactivera la soumission en appuyant sur Entrée.
66Ton99

@ 66Ton99 Il suffit de tester en FF. Cela ne désactive pas la soumission
Eugen Konkov

1
"ça marche sur ma machine";) il y a beaucoup plus de navigateurs que firefox. on peut sans doute vouloir une solution qui fonctionne de manière fiable dans tous les navigateurs.
Félix Gagnon-Grenier

Fonctionne sur Chrome 63
piotr_cz

Ne fonctionne pas pour le moment dans Chrome ou Safari sur iPhone.
Ulf Adams

7

La façon la plus élégante de le faire est de conserver le bouton de soumission, mais définissez sa bordure, son remplissage et sa taille de police sur 0.

Cela rendra les dimensions du bouton 0x0.

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

Vous pouvez l'essayer vous-même et en définissant un contour pour 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 mix.

JS Fiddle


5

IE ne permet pas d'appuyer sur la touche ENTRÉE pour la soumission du formulaire si le bouton d'envoi 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 comme 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.

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

4

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

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

On dirait qu'IE8 n'aime pas la position: absolu, il ne se soumet pas.
maxxyme

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

Notez qu'il existe une différence entre display:noneet visibility:hiddenpour d'autres éléments de formulaire.


4

Solution HTML5

<input type="submit" hidden />

Comme ci-dessus - ne fonctionne pas avec Chrome ou Safari sur iPhone.
Ulf Adams


2

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

J'utiliserais toujours position: absolu, float affecte la mise en page.
SuperDuck

On dirait qu'IE8 n'aime pas la position: absolu, il ne se soumet pas. J'utilise:
maxxyme

Idem pour float: left;, une fois retiré, il se soumet.
maxxyme

2

Vous pouvez aussi essayer ceci

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

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


1
IMPORTANT: vous DEVEZ utiliser une URL d'image valide ou Firefox affichera un texte "Soumettre la requête" sur votre page
PH.

2
Si vous ajoutez une image qui existe et définissez la hauteur et la largeur à zéro, ou ajoutez une image inexistante, le navigateur devra effectuer une requête GET gaspillée pour la ressource.
pwdst

2

Je travaille avec un tas de cadres d'interface utilisateur. Beaucoup d'entre eux ont une classe intégrée que vous pouvez utiliser pour masquer visuellement des choses.

Amorcer

<input type="submit" class="sr-only" tabindex="-1">

Matériel angulaire

<input type="submit" class="cdk-visually-hidden" tabindex="-1">

Les esprits brillants qui ont créé ces cadres ont défini ces styles comme suit:

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cdk-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
}

1

Je l'ai ajouté à une fonction sur le document prêt. S'il n'y a pas de bouton d'envoi sur le formulaire (tous mes formulaires de boîte de dialogue Jquery n'ont pas de boutons d'envoi), 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
input.on('keypress', function(event) {
    if ( event.which === 13 ) {
        form.submit();
        return false;
    }
});

-2

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.