web-dev-qa-db-fra.com

Envoi d'un formulaire en appuyant sur Entrée sans bouton d'envoi

J'essaie de soumettre un formulaire en appuyant sur Entrée, mais sans afficher de bouton d'envoi. Je ne veux pas utiliser JavaScript si possible car je veux que tout fonctionne sur tous les navigateurs (la seule façon dont JS que je connaisse est avec les événements).

À l'heure actuelle, 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, mais 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 cela fonctionnera sur toutes les plateformes avec tous les navigateurs.

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

htmlformssubmit
287
PythonPower

Essayer:

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

Cela poussera le bouton waaay à gauche, hors de l'écran. La bonne chose avec cela est, vous obtiendrez une dégradation gracieuse lorsque CSS est désactivé.

Mise à jour - Solution de contournement pour IE7

Comme suggéré par Bryan Downing + avec tabindex pour éviter d’atteindre atteindre ce bouton (par Ates Goral):

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

Je pense que vous devriez emprunter la voie Javascript, ou du moins que 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>
91
strager

Avez-vous essayé cela?

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

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

75
andyk

Une autre solution sans le bouton d'envoi:

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

});
27
damoiser

Pour tous ceux qui consulteront cette réponse à l'avenir, HTML5 implémentera un nouvel attribut pour les éléments de formulaire, hidden, qui appliquera automatiquement display:none à votre élément.

par exemple.

<input type="submit" hidden />
13
Panomosh

Utilisez le code suivant, cela corrige 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 en tant que première ligne de votre code avec la valeur appropriée du nom et de la valeur.

13
Mayank Gupta

Au lieu du hack que vous utilisez actuellement pour masquer le bouton, il serait beaucoup plus simple de définir visibility: collapse; dans l'attribut style. Cependant, je recommanderais quand même d'utiliser un peu de Javascript simple pour soumettre le formulaire. Autant que je sache, le soutien à de telles choses est omniprésent de nos jours.

7
Noldorin

Il suffit de définir 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>
7
jumpnett

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

Cela fera les dimensions du bouton 0x0.

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

Vous pouvez essayer cela 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 oblige à dormir la nuit, vous pouvez également le mettre dans le même sac.

JS Fiddle

6
Waltur Buerk

Internet Explorer ne permet pas d'appuyer sur la touche Entrée pour soumettre un formulaire si le bouton d'envoi n'est pas visible et si le formulaire comporte plusieurs champs. Donnez-lui ce qu'il veut en fournissant une image transparente de 1x1 pixel sous la forme d'un bouton d'envoi. Bien sûr, cela prendra un pixel de la mise en page, mais regardez ce que vous devez faire pour la cacher.

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

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

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

le plus simple

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

Tu pourrais essayer aussi ça

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

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

2
waney

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
Jekis
<input type="submit" style="display:none;"/>

Cela fonctionne bien et c'est la version la plus explicite de ce que vous essayez d'atteindre.

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

1
Shammoo

Solution HTML5

<input type="submit" hidden />
0
Andrew Luca

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 JQuery Dialog 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
seePatCode