Come inviare un modulo quando viene premuto il tasto Invio?

Qualcuno può dirmi come inviare un modulo HTML quando viene premuto il tasto Invio e se non ci sono pulsanti nel modulo? Il pulsante di invio non è presente . Sto usando un div personalizzato invece di quello.

IMO, questa è la risposta più pulita:

<form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input type="submit" style="display:none"/>
</form>

Meglio ancora, se stai usando javascript per inviare il modulo usando il div personalizzato, dovresti anche usare javascript per crearlo e per impostare lo stile di visualizzazione: nessuno sul pulsante. In questo modo gli utenti con javascript disabilitato vedranno ancora il pulsante di invio e potranno cliccarci sopra.

È stato notato che display: none farà sì che IE ignori l'input. Ho creato un nuovo esempio JSFiddle che inizia come un modulo standard e utilizza il miglioramento progressivo per nascondere l'invio e creare il nuovo div. Ho usato lo stile CSS di StriplingWarrior .

Per inviare il modulo quando viene premuto il tasto invio, creare una funzione javascript in questo modo.

function checkSubmit(e) {
   if(e && e.keyCode == 13) {
      document.forms[0].submit();
   }
}

Quindi aggiungi l'evento a qualsiasi ambito di cui hai bisogno, ad esempio sul tag div:

<div onKeyPress="return checkSubmit(event)"/>

Questo è comunque anche il comportamento predefinito di Internet Explorer 7 (probabilmente anche nelle versioni precedenti).

Ho provato varie strategie basate su javascript / jQuery, ma ho continuato ad avere problemi. L'ultimo problema che si è verificato ha coinvolto l'invio accidentale quando l'utente utilizza il tasto Invio per selezionare dall'elenco di completamento automatico integrato del browser. Finalmente sono passato a questa strategia, che sembra funzionare su tutti i browser supportati dalla mia azienda:

<div class="hidden-submit"><input type="submit" tabindex="-1"/></div>

.hidden-submit {
    border: 0 none;
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

Questo è simile alla risposta attualmente accettata da Chris Marasti-Georg, ma evitandola display: none sembra funzionare correttamente su tutti i browser.

Aggiornare

Ho modificato il codice sopra per includere un negativo in tabindexmodo che non acquisisca il tasto tab. Anche se tecnicamente non verrà convalidato in HTML 4, la specifica HTML5 include il linguaggio per farlo funzionare nel modo in cui la maggior parte dei browser lo stavano già implementando comunque.

Usa il <button>tag. Dallo standard W3C:

I pulsanti creati con l'elemento BUTTON funzionano proprio come i pulsanti creati con l'elemento INPUT, ma offrono possibilità di rendering più ricche: l'elemento BUTTON può avere contenuto. Ad esempio, un elemento BUTTON che contiene un'immagine funziona come e può assomigliare a un elemento INPUT il cui tipo è impostato su "immagine", ma il tipo di elemento BUTTON consente il contenuto.

Fondamentalmente c'è un altro tag, <button>che non richiede javascript , che può anche inviare un modulo. Può avere uno stile molto simile a un <div>tag (incluso <img />all'interno del tag del pulsante). I pulsanti del <input />tag non sono così flessibili.

<button type="submit">
    <img src="my-icon.png" />
    Clicking will submit the form
</button>

Ci sono tre tipi da impostare su <button>; mappano ai <input>tipi di pulsante.

<button type="submit">Will submit the form</button>
<button type="reset">Will reset the form</button>
<button type="button">Will do nothing; add javascript onclick hooks</button>

Standard

• Wiki W3C su <button>
• HTML5 <button>
• HTML4 <button>

Uso i <button>tag concss-sprite e un po 'di cssstyling per ottenere pulsanti colorati e funzionali. Si noti che è possibile scrivere css, ad esempio, per i <a class="button">collegamenti condivisi con lo stile con l' <button>elemento.

Credo che questo sia quello che vuoi.

//<![CDATA[

//Send form if they hit enter.
document.onkeypress = enter;
function enter(e) {
  if (e.which == 13) { sendform(); }
}

//Form to send
function sendform() {
  document.forms[0].submit();
}
//]]>

Ogni volta che viene premuto un tasto, verrà chiamata la funzione enter (). Se il tasto premuto corrisponde al tasto Invio (13), verrà chiamato sendform () e verrà inviato il primo form incontrato. Questo è solo per Firefox e altri browser conformi agli standard.

Se trovi utile questo codice, assicurati di votarmi!

Ecco come lo faccio con jQuery

j(".textBoxClass").keypress(function(e)
{
    // if the key pressed is the enter key
    if (e.which == 13)
    {
        // do work
    }
});

Altro javascript non sarebbe troppo diverso. il problema sta controllando l'argomento di pressione del tasto "13", che è il tasto Invio

Usa il seguente script.

<SCRIPT TYPE="text/javascript">
<!--
    function submitenter(myfield,e)
    {
        var keycode;
        if (window.event) keycode = window.event.keyCode;
        else if (e) keycode = e.which;
        else return true;

        if (keycode == 13)
        {
            myfield.form.submit();
            return false;
        }
        else
            return true;
    }
//-->
</SCRIPT>

Per ogni campo che deve inviare il modulo quando l'utente preme invio, chiama la funzione submitenter come segue.

<FORM ACTION="../cgi-bin/formaction.pl">
    name:     <INPUT NAME=realname SIZE=15><BR>
    password: <INPUT NAME=password TYPE=PASSWORD SIZE=10
       onKeyPress="return submitenter(this,event)"><BR>
<INPUT TYPE=SUBMIT VALUE="Submit">
</FORM>

Uso questo metodo:

<form name='test' method=post action='sendme.php'>
    <input type=text name='test1'>
    <input type=button value='send' onClick='document.test.submit()'>
    <input type=image src='spacer.gif'>  <!-- <<<< this is the secret! -->
</form>

Fondamentalmente, aggiungo solo un input invisibile di tipo image (dove " spacer.gif " è una gif trasparente 1x1).

In questo modo, posso inviare questo modulo sia con il pulsante "invia" o semplicemente premendo Invio sulla tastiera.

Questo è il trucco!

Perché non applichi semplicemente gli stili di invio div a un pulsante di invio? Sono sicuro che ci sia un javascript per questo, ma sarebbe più facile.

Se stai usando asp.net puoi usare l' attributo defaultButton nel form.

Penso che dovresti effettivamente avere un pulsante di invio o un'immagine di invio ... Hai un motivo specifico per utilizzare un "submit div"? Se vuoi solo stili personalizzati, ti consiglio <input type="image".... http://webdesign.about.com/cs/forms/a/aaformsubmit_2.htm

Estendendo le risposte, questo è quello che ha funzionato per me, forse qualcuno lo troverà utile.

HTML

<form method="post" action="/url" id="editMeta">
   <textarea class="form-control" onkeypress="submitOnEnter(event)"></textarea>
</form>

Js

function submitOnEnter(e) {
  if (e.which == 13) {
    document.getElementById("editMeta").submit()
  }
}

Simile all'esempio di Chris Marasti-Georg, utilizza invece javascript inline. Essenzialmente aggiungi onkeypress ai campi con cui vuoi che il tasto Invio funzioni. Questo esempio agisce sul campo della password.

<html>
<head><title>title</title></head>
<body>
  <form action="" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password" onkeypress="if(event.keyCode==13) {javascript:form.submit();}" /><br/>
  <input type="submit" onClick="javascript:form.submit();"/>
</form>
</body>
</html>

Dal momento che i display: nonepulsanti e gli input non funzionano in Safari e IE, ho scoperto che il modo più semplice, che non richiede ulteriori hack javascript , è semplicemente aggiungere un assolutamente posizionato <button />al modulo e posizionarlo lontano dallo schermo.

<form action="" method="get">
  <input type="text" name="name" />
  <input type="password" name="password" />
  <div class="yourCustomDiv"/>
  <button style="position:absolute;left:-10000px;right:9990px"/>
</form>

Funziona nella versione corrente di tutti i principali browser a partire da settembre 2016.

Ovviamente è consigliato (e più semanticamente corretto) solo lo stile <button/>desiderato.

L'uso dell'attributo "autofocus" funziona per fornire il focus di input al pulsante per impostazione predefinita. In effetti, facendo clic su qualsiasi controllo all'interno del modulo si dà anche il focus al modulo, un requisito affinché il modulo reagisca al RETURN. Quindi, l '"autofocus" lo fa per te nel caso in cui l'utente non abbia mai cliccato su nessun altro controllo all'interno del modulo.

Quindi, l '"autofocus" fa la differenza cruciale se l'utente non ha mai cliccato su nessuno dei controlli del modulo prima di premere INVIO.

Ma anche allora, ci sono ancora 2 condizioni da soddisfare affinché funzioni senza JS:

a) devi specificare una pagina a cui andare (se lasciato vuoto non funzionerà). Nel mio esempio è hello.php

b) il controllo deve essere visibile. È plausibile che tu possa spostarlo fuori dalla pagina per nasconderlo, ma non puoi usare display: nessuno o visibilità: nascosto. Quello che ho fatto è stato utilizzare lo stile inline per spostarlo fuori dalla pagina a sinistra di 200 px. Ho impostato l'altezza 0px in modo che non occupi spazio. Perché altrimenti può ancora interrompere altri controlli sopra e sotto. Oppure potresti far fluttuare anche l'elemento.

<form action="hello.php" method="get">
  Name: <input type="text" name="name"/><br/>
  Pwd: <input type="password" name="password"/><br/>
  <div class="yourCustomDiv"/>
  <input autofocus type="submit" style="position:relative; left:-200px; height:0px;" />
</form>