HTML5: come inviare un modulo, dopo aver premuto ENTER in uno degli input di testo?

Il titolo parla da solo ... Ho un paio di moduli, uno di questi è solo un modulo di immissione del testo e l'altro è composto da due input di testo. Non voglio alcun pulsante presentare in nessuno di essi, voglio ogni modulo per inviare ogni volta che l'utente preme il tasto ENTER in qualsiasi input di testo:HTML5: come inviare un modulo, dopo aver premuto ENTER in uno degli input di testo?

La forma composta da un solo ingresso sostiene ogni volta l'utente preme il pulsante ENTER - Perfetto!
Il secondo modulo composto da due input di testo non si comporta in questo modo, non viene inviato quando l'utente preme il pulsante INVIO in uno dei due ingressi.

C'è un modo per fare una forma con più di un input di testo comportarsi in questo modo e evitare di avere un tasto presentare in esso?

fonte

2015-01-06 charliebrownie

Prova ad aggiungere questo tra i tag <form></form>

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

testato e funziona su Firefox e Chrome. Se nel modulo è presente un tipo di input di invio, immettere deve inviarlo automaticamente, indipendentemente dal fatto che sia visibile o meno.

sto in realtà utilizzando questo me stesso in un form di login, anche se nel campo Nome utente, ha più senso per passare al campo successivo rispetto a presentare. Nel caso in cui si dispone di un caso d'uso simile, ecco il codice che ho usato (richiede jQuery)

$('#username').keypress(function(event) { 
    if (event.keyCode == 13 || event.which == 13) { 
     $('#password').focus(); 
     event.preventDefault(); 
    } 
});

Si noti che v'è una leggera bug anche se - se l'utente seleziona un nome utente del browser di completamento automatico e preme immettere, si sposta ancora sul campo successivo invece di selezionarlo. Non ho avuto il tempo di eseguire il debug di questo, ma se qualcuno può capire come risolverlo, sarebbe bello.

fonte

2015-01-06 22:08:15 user193130

Neat, stai facendo qualcosa di simile all'input '#password'? Solo curiosità! Nascondere l'input di invio ha funzionato bene, avevo solo bisogno di qualcosa di semplice con cui andare avanti! – charliebrownie

Ho un pulsante di invio visibile sul modulo e il campo '# password' non richiede alcun codice JS poiché premendo invio il modulo viene inviato automaticamente come previsto. Sono contento che sia stato utile :) – user193130

E immagino che se il campo '# username' è vuoto ma la tua' # password' non è e il modulo è stato inviato, lo gestirai, giusto? :) Grazie, davvero è stato d'aiuto! – charliebrownie

Dovrete cercare il tasto Invio. Questo post qui mostra come farlo. Enter key press event in JavaScript

fonte

2015-01-06 22:02:20

Assicurarsi che gli input siano all'interno dell'elemento "form" e assegnare all'elemento "form" un attributo "action".

fonte

2015-01-06 22:03:12 Ahmadbaba46

sto catturare la forma della presentazione utilizzando jQuery, usando '$ (formid) .on ('Invia', function (e) {...});' che funziona perfettamente per il 1 ° caso (uno modulo di inserimento del testo). – charliebrownie

Stavo cercando una soluzione a questo problema e voglio condividere la mia soluzione, sulla base di molti post qui. (Testato su moderno Chrome/Firefox/IE)

Quindi, utilizzando solo il codice Javascript follow invia il modulo tasto viene premuto su qualsiasi campo o se si preme il tasto ENTER Submit se. Dopo di ciò cancella/ripristina il modulo, che è una cosa carina da fare.

Spero che aiuti.

<!DOCTYPE html> 
<html> 
<body> 
<p>Based on http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onsubmit</p> 
<p>When you submit the form, a function is triggered which alerts some text.</p> 

<div onKeyPress="return myFunction(event)"> 
    <form id="form01" action="demo_form.asp" onsubmit="return false;" > 
    Enter name: <input type="text" name="fname"> 
    <input type="button" value="Submit" onclick="myFunction(0)"> 
    </form> 
</div> 

<script> 
function myFunction(e) { 
    if((e && e.keyCode == 13) || e == 0) { 
    alert("The form was submitted"); 
    document.forms.form01.submit(); 
    document.forms.form01.fname.value = ""; // could be form01.reset as well 
    } 
} 
</script> 

</body> 
</html>

fonte

2015-07-14 19:11:05 user3058813

HTML5: come inviare un modulo, dopo aver premuto ENTER in uno degli input di testo?

risposta

Problemi correlati