Invio di un modulo premendo Invio senza un pulsante di invio
https://stackoverflow.com/questions/477691
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Beh, 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?
Soluzione
Prova:
<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 CSS è disabilitato.
Aggiornamento - Soluzione alternativa per IE7
Come suggerito da Bryan Downing + con tabindex per impedire a tab di raggiungere questo pulsante (di Ates Goral):
<input type="submit"
style="position: absolute; left: -9999px; width: 1px; height: 1px;"
tabindex="-1" />
Altri suggerimenti
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;" />
Dato che la maggior parte dei browser capisce la visibilità di : hidden e in realtà non funziona come display: none , suppongo 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 questa risposta in futuro, HTML5 implementa un nuovo attributo per gli elementi del modulo, nascosto , che applicherà automaticamente display: none al tuo elemento.
per es.
<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 visible: collapse; nell'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 "circostante". l'elemento 0x0 px.
Non c'è bisogno di visibilità: nascosto, ma se ti fa dormire la notte, puoi anche buttarlo nel mix.
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;
}
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">
Potresti includere un'immagine con larghezza / altezza = 0 px
<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 visible: hidden per altri elementi del modulo.
Soluzione HTML5
<input type="submit" hidden />
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), aggiungilo.
$(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);
});
}
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. :)
