Bene, sto cercando di inviare un modulo premendo invio ma non visualizzo un pulsante di invio. Non voglio entrare in JavaScript, se possibile, poiché voglio che tutto funzioni su tutti i browser (l'unico modo JS che conosco è con gli eventi).

In questo momento il modulo si presenta così:

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

Che funziona abbastanza bene. Il pulsante di invio funziona quando l'utente preme invio e il pulsante non viene visualizzato in Firefox, IE, Safari, Opera e Chrome. Tuttavia, non mi piace ancora la soluzione poiché è difficile sapere se funzionerà su tutte le piattaforme con tutti i browser.

Qualcuno può suggerire un metodo migliore? O è tutto così bello?

Provare:

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

Ciò spingerà il pulsante a sinistra, fuori dallo schermo. La cosa bella di questo è che otterrai un grazioso degrado quando il CSS è disabilitato.

Aggiornamento: soluzione alternativa per IE7

Come suggerito da Bryan Downing + con tabindexper impedire a tab di raggiungere questo pulsante (di Ates Goral):

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

Penso che dovresti seguire il percorso Javascript, o almeno dovrei:

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

Hai provato questo?

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

Dal momento che la maggior parte dei browser capisce visibility:hiddene non funziona davvero display:none, immagino che dovrebbe andare bene, però. Non l'ho mai provato da solo, quindi CMIIW.

Un'altra soluzione senza il pulsante di invio:

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

});

Per chiunque guardi a questa risposta in futuro, HTML5 implementa un nuovo attributo per gli elementi del modulo hidden, che si applicherà automaticamente display:noneal tuo elemento.

per esempio

<input type="submit" hidden />

Usa il seguente codice, questo ha risolto il mio problema in tutti e 3 i browser (FF, IE e Chrome):

<input  type="submit" name="update" value=" Apply " 
    style="position: absolute; height: 0px; width: 0px; border: none; padding: 0px;"
    hidefocus="true" tabindex="-1"/>

Aggiungi la riga sopra come prima riga nel codice con il valore appropriato di nome e valore.

Invece dell'hack che attualmente usi per nascondere il pulsante, sarebbe molto più semplice impostare visibility: collapse;l'attributo style. Tuttavia, consiglierei comunque di utilizzare un po 'di Javascript semplice per inviare il modulo. Per quanto ho capito, il supporto per queste cose è onnipresente al giorno d'oggi.

Basta impostare l'attributo nascosto su 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>

Il modo più elegante per farlo è mantenere il pulsante di invio, ma impostarne il bordo, il riempimento e la dimensione del carattere su 0.

Questo renderà le dimensioni del pulsante 0x0.

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

Puoi provarlo tu stesso e impostando un contorno sull'elemento vedrai un punto, che è il bordo esterno che "circonda" l'elemento 0x0 px.

Non c'è bisogno di visibilità: nascosto, ma se ti fa dormire la notte, puoi anche buttarlo nel mix.

JS Fiddle

IE non consente di premere il tasto INVIO per l'invio del modulo se il pulsante di invio non è visibile e il modulo ha più di un campo. Dagli quello che vuole fornendo un'immagine trasparente da 1x1 pixel come pulsante di invio. Ovviamente occuperà un pixel del layout, ma guarda cosa devi fare per nasconderlo.

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

Questa è la mia soluzione, testata in Chrome, Firefox 6 e IE7 +:

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

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

Funziona bene ed è la versione più esplicita di ciò che stai cercando di ottenere.

Si noti che esiste una differenza tra display:nonee visibility:hiddenper altri elementi del modulo.

Soluzione HTML5

<input type="submit" hidden />

il modo più semplice

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

Per coloro che hanno problemi con IE e anche per gli altri.

{
    float: left;
    width: 1px;
    height: 1px;
    background-color: transparent;
    border: none;
}

Puoi provare anche questo

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

È possibile includere un'immagine con larghezza / altezza = 0 px

Lavoro con un sacco di framework dell'interfaccia utente. Molti di loro hanno una classe integrata che puoi usare per nascondere visivamente le cose.

bootstrap

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

Materiale angolare

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

Le menti brillanti che hanno creato questi quadri hanno definito questi stili come segue:

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

L'ho aggiunto a una funzione sul documento pronto. Se sul modulo non è presente alcun pulsante di invio (tutti i moduli di finestra di dialogo di Jquery non dispongono di pulsanti di invio), aggiungerlo.

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

Ho usato:

<input class="hidden" type="submit" value="" 
onclick="document.getElementById('loginform').submit();"/>

e:

 .hidden {
        border:0;
        padding:0;
        font-size:0;
        width: 0px;
        height: 0px;
    }

nel file .css. Ha funzionato magicamente anche per me. :)