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?

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

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>

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.

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

});

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

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.

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.

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>

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

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

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

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

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

Solution HTML5

<input type="submit" hidden />

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

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

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

input.on('keypress', function(event) {
    if ( event.which === 13 ) {
        form.submit();
        return false;
    }
});

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