risposta-alla-domanda-sullo-sviluppo-web-bd.com

Invio di un modulo premendo invio senza un pulsante di invio

Bene, sto tentando di inviare un modulo premendo Invio ma non visualizzando 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 assomiglia a questo:

<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 è così buono come si arriva?

287
PythonPower

Provare:

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

Ciò premerà il pulsante waaay a sinistra, fuori dallo schermo. La cosa carina con questo è che si otterrebbe un degrado aggraziato quando il CSS è disabilitato.

Aggiornamento - Soluzione alternativa per IE7

Come suggerito da Bryan Downing + con tabindex per impedire alla scheda di raggiungere questo pulsante (di Ates Goral):

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

Penso che dovrebbe andare sulla rotta Javascript, o almeno vorrei:

<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

Hai provato questo?

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

Poiché la maggior parte dei browser comprende visibility:hidden e in realtà non funziona come display:none, suppongo che dovrebbe comunque andare bene. Non l'ho mai provato da solo, quindi CMIIW.

75
andyk

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

});
27
damoiser

Per chi guarda questa risposta in futuro, HTML5 implementa un nuovo attributo per gli elementi del modulo, hidden, che applicherà automaticamente display:none al tuo elemento.

per esempio.

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

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 sopra la riga come prima riga del tuo codice con il valore appropriato di nome e valore.

13
Mayank Gupta

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

7
Noldorin

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

Il modo più elegante per farlo è quello di mantenere il pulsante di invio, ma impostare 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 provare tu stesso, e impostando un contorno per l'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 lanciarlo nel mix.

JS Fiddle

6
Waltur Buerk

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 ciò che vuole fornendo un'immagine trasparente 1x1 pixel come pulsante di invio. Naturalmente occuperà un pixel del layout, ma guarda cosa devi fare per nasconderlo.

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

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

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

il modo più semplice

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

Potresti provare anche questo

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

Potresti includere un'immagine con larghezza/altezza = 0 px

2
waney

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

{
    float: left;
    width: 1px;
    height: 1px;
    background-color: transparent;
    border: none;
}
2
Jekis
<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:none e visibility:hidden per altri elementi del modulo.

1
Shammoo

Soluzione HTML5

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

L'ho aggiunto a una funzione su documento pronto. Se non è presente alcun pulsante di invio nel modulo (tutti i miei moduli di finestra di dialogo JQuery non hanno 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);
    });
}
0
seePatCode