Gestire l'utente premendo la chiave "Invio" in un sito Web ASP.NET MVC

Question

Sto lavorando su un sito Web ASP.NET MVC con più pulsanti di invio. Ad esempio

<input type="submit" name="SubmitButton" value="Reset" /> 
    <input type="submit" name="SubmitButton" value="OK" /> 
    <input type="submit" name="SubmitButton" value="Back" /> 

Devo consentire agli utenti di inviare rapidamente il modulo premendo il tasto "Invio". Lo standard HTML sembra specificare che il primo pulsante di invio verrà assunto se un utente preme il tasto "Invio". Tuttavia, ho bisogno di fare il pulsante 2nd (cioè il pulsante "OK") il pulsante predefinito e per motivi di cui non voglio nemmeno parlare, cambiare l'ordine dei pulsanti non è un'opzione.

Ho cercato su google e ho trovato this post sull'utilizzo di Page.Form.DefaultButton in ASP.NET ma questo non funziona con ASP.NET MVC.

Ho anche provato la seguente soluzione javascript, mentre funziona in Chrome, ma non funziona in IE6

$('body').keypress(function(e) { 
     if (e.which === 13) { 
      $("input[value='OK']").trigger('click'); 
     } 
    }); 

mi vengono in mente alcune soluzioni davvero estreme, come passare attraverso ogni singolo controlli sotto forma di un allegare la funzione sopra a loro. Tuttavia, non penso che sia una soluzione molto accurata, quindi mi chiedo se qualcuno abbia trovato una soluzione migliore?

Answer 1

Prima di tutto, questo è sbagliato:

<input type="submit" name="SubmitButton" value="Reset" /> 
<input type="submit" name="SubmitButton" value="OK" /> 
<input type="submit" name="SubmitButton" value="Back" /> 

Tutti e tre di loro sono bottoni di invio. Un reset è un input di type = "reset". Ottenere ordinato. In secondo luogo, ho implementato con successo qualcosa del genere, e funziona su IE6. Prova questo:

function keypressHandler(e) 
    { 
     if(e.which == 13) { 
      e.preventDefault(); //stops default action: submitting form 
      $(this).blur(); 
      $('#SubmitButton').focus().click();//give your submit an ID 
     } 
    } 

    $('#myForm').keypress(keypressHandler); 

La parte di messa a fuoco() fa sembrare che il pulsante venga premuto quando l'utente preme Invio. Abbastanza elegante.

Answer 2

Cambia l'ordine dei pulsanti nella sorgente ma non visivamente (ad esempio, utilizzare CSS per scambiare i pulsanti)?

Answer 3

È necessario disporre di un solo pulsante di invio. Il pulsante di reset deve essere type="reset" e il pulsante indietro dovrebbe probabilmente essere type="button" come questo:

<input type="reset" name="ResetButton" value="Reset" /> 
<input type="submit" name="SubmitButton" value="OK" /> 
<input type="button" name="BackButton" value="Back" /> 

Poi, Reset e OK sarà solo lavorare il modo in cui si suppone che e avrete solo bisogno di gestire il pulsante Indietro click con Javascript.

Modifica: L'altra opzione sarebbe quella di posizionare i pulsanti di reimpostazione e di invio ciascuno nelle proprie forme all'interno di iframe. Quindi verrebbero ignorati dal modulo principale e non sarebbero pulsanti predefiniti. Inoltre, questo ti permetterebbe di indirizzarli a diverse azioni del server se necessario e non ci sarebbe alcuna dipendenza da Javascript per le azioni dei pulsanti.

Answer 4

Utilizzare questo.

$(function(){ 
    $('input').keydown(function(e){ 
     if (e.keyCode == 13) { 
      $("input[value='OK']").focus().click(); 
      return false; 
     } 
    }); 
}); 

Answer 5

Dal momento che utilizzare jQuery, se si utilizza hotkeys plugin, si può fare un tale approccio:

$(document).bind('keydown', 'return', function (evt){ 
    $.next("input[value='OK']").trigger("click"); 
    return false; 
}); 

Answer 6

HTML standard sembra indicare che il pulsante prima presentare sarà assunto se un utente premere il tasto 'Invio' .

No, l'utilizzo del tasto Invio non è definito, è un'estensione propiziale che è stata aggiunta sotto varie interpretazioni. Otterrai comportamenti diversi nei vari browser (e può diventare molto pericoloso quando inizi a mixare in diverse convenzioni culturali o dell'interfaccia utente tra l'ordine delle opzioni da sinistra a destra/da destra a sinistra).

Se sul modulo è presente solo un pulsante, tutti i browser tradizionali seguono lo stesso comportamento: inviano il modulo come se fosse stato premuto quel pulsante (un pulsanteName = pulsanteValore è incluso nei dati del modulo). Ovviamente questo non significa che i pulsanti del gestore onclick andranno a fuoco - quel comportamento è specifico del browser.

Quando ci sono diversi pulsanti è una sparatoria completa. Alcuni browser decidono che il primo pulsante (e la definizione di first può variare - la maggior parte usa il primo menzionato nell'albero Html, mentre altri tentano di usare la posizione dello schermo) è stato cliccato e lo usa nell'invio, mentre altri browser (in particolare alcune versioni di IE) presuppongono che non sia stato premuto alcun pulsante specifico e che quindi non includa un pulsanteName = pulsanteValore (il resto del modulo viene inviato correttamente).