Invio invio chiave in un modulo HTML invio invece di pulsante di attivazione

Question

Ho un modulo HTML con un singolo input submit, ma anche vari elementi button. Quando l'utente preme il tasto "invio", mi aspetto che invii effettivamente il modulo, ma invece (almeno in Chrome 15) trovo che stia attivando il primo button (poiché ciò si verifica prima nell'HTML rispetto al submit input, immagino).

So che in generale non è possibile forzare i browser a favorire un particolare submit di ingresso, ma ho davvero pensato che sarebbero favorevoli submit ingressi sopra button elementi. C'è un piccolo ritocco che posso apportare all'HTML per fare in modo che funzioni, o dovrò adottare un qualche tipo di approccio Javascript?

Ecco un mockup di massima del HTML:

<form action="form.php" method="POST"> 
    <input type="text" name="field1"/> 
    <button onclick="return myFunc1()">Button 1</button> 
    <input type="submit" name="go" value="Submit"/> 
</form> 

Answer 1

È possibile utilizzare jQuery:

$(function() { 
    $("form input").keypress(function (e) { 
     if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) { 
      $('button[type=submit] .default').click(); 
      return false; 
     } else { 
      return true; 
     } 
    }); 
}); 

Answer 2

Prova questa, se tasto Invio è stato premuto è possibile catturare in questo modo, per esempio, ho sviluppato una risposta l'altro giorno html button specify selected, vedere se questo aiuta.

Specificare il nome dei moduli come ad esempio yourFormName quindi si dovrebbe essere in grado di inviare il modulo senza avere il focus sul modulo.

document.onkeypress = keyPress; 

function keyPress(e){ 
    var x = e || window.event; 
    var key = (x.keyCode || x.which); 
    if(key == 13 || key == 3){ 
    // myFunc1(); 
    document.yourFormName.submit(); 
    } 
} 

Answer 3

Dato c'è solo una (o con questa soluzione potenzialmente nemmeno uno) pulsante di invio, la soluzione qui è basato jQuery che lavorerà per molteplici forme sulla stessa pagina ...

<script type="text/javascript"> 
    $(document).ready(function() { 

     var makeAllFormSubmitOnEnter = function() { 
      $('form input, form select').live('keypress', function (e) { 
       if (e.which && e.which == 13) { 
        $(this).parents('form').submit(); 
        return false; 
       } else { 
        return true; 
       } 
      }); 
     }; 

     makeAllFormSubmitOnEnter(); 
    }); 
</script> 

Answer 4

Non hai bisogno di JavaScript per scegliere il pulsante o l'input di invio predefinito. Devi solo contrassegnarlo con type="submit" e gli altri pulsanti contrassegnarlo con type="button". Nel tuo esempio:

<button type="button" onclick="return myFunc1()">Button 1</button> 
<input type="submit" name="go" value="Submit"/> 

Answer 5

Ho appena dato un vortice sia a Chrome che a Firefox e IE10.

Come accennato in precedenza, accertarsi di aver contrassegnato con type = "button", "reset", "submit" ecc. Per assicurarsi che funzioni correttamente in cascata e scelga il pulsante corretto.

Forse anche impostare tutti loro di avere la stessa forma (vale a dire tutti come che ha funzionato per me)

Answer 6

ho appena colpito un problema con questo. La mia è stata una caduta fuori dal cambiare il input ad un button e che avevo avuto un mal scritta /> tag Terminator:

così ho dovuto:

<button name="submit_login" type="submit" class="login" />Login</button> 

E hanno appena modificato a:

<button name="submit_login" type="submit" class="login">Login</button> 

ora funziona come un fascino, sempre le piccole cose fastidiose ... HTH

Answer 7

$("form#submit input").on('keypress',function(event) { 
    event.preventDefault(); 
    if (event.which === 13) { 
    $('button.submit').trigger('click'); 
    } 
});