5 Casella di testo, 2 pulsanti. Come assegnare textBox a Button?

Question

Desidero dare ai miei utenti la possibilità di utilizzare una casella di testo e premere Invio. La sfida è che ho 5 caselle di testo e 2 opzioni. 3 caselle di testo appartengono a un pulsante e 2 caselle di testo all'altro. Come posso attivare un particolare pulsante in base alla casella di testo in cui si trovava l'utente quando ha premuto Invio?

Answer 1

Ho eseguito questo da solo, dove avevo una pagina con due diversi moduli di accesso per i diversi tipi di utenti. Quello che ho fatto è stato separare i due moduli nei propri controlli del pannello ASP e sul pannello impostando il DefaultButton su qualsiasi cosa desiderassi. In questo modo, quando hanno finito di digitare il modulo e di premere il tasto Invio, questo verrà inviato sul pulsante corretto.

Esempio:

<asp:Panel id="panel1" DefaultButton="button1"> 
    <asp:textbox id="textbox1"/> 
    <asp:textbox id="textbox2"/> 
    <asp:buton id="button1"/> 
</asp:panel> 

<asp:panel id="panel2" DefaultButton="button2"> 
    <asp:textbox id="textbox3"/> 
    <asp:textbox id="textbox4"/> 
    <asp:button id="button2"/> 
</asp:panel> 

EDIT: Ecco another method di come farlo assegnando una proprietà OnKeyPress alle vostre caselle di testo. Questa è una soluzione SEPARATO DA QUELLO CHE ho descritto AL TOP

Esempio:

function clickButton(e, buttonid){ 
    var evt = e ? e : window.event; 
    var bt = document.getElementById(buttonid); 
    if (bt){ 
     if (evt.keyCode == 13){ 
      bt.click(); 
      return false; 
     } 
    } 
} 

//code behind 
TextBox1.Attributes.Add("onkeypress", 
    "return clickButton(event,'" + Button1.ClientID + "')"); 

Il codice genera dietro il seguente codice:

<input name="TextBox1" type="text" id="TextBox1" onkeypress="return 
    clickButton(event,'Button1')" /> 

Answer 2

Utilizzando jQuery Questo è abbastanza facile da eseguire:

$(function() 
{ 
    $("#id-of-textbox-1, #id-of-textbox2, etc.").keyup(function (e) 
    { 
     if (e.keyCode === 13) $("#id-of-submit-button-1").click(); 
    }); 

    // And for the second group 

    $("#id-of-textbox-3, #id-of-textbox4, etc.").keyup(function (e) 
    { 
     if (e.keyCode === 13) $("#id-of-submit-button-2").click(); 
    }); 
}); 

Se si utilizza il controllo di ASP.NET Pulsante, assicurarsi di impostare la proprietà UseSubmitBehavior su quelli su falso.

Answer 3

In questa situazione vorrei raggruppare le relative caselle di testo e il pulsante in un pannello. Panel ha una proprietà DefaultButton che puoi usare. DefaultButton = "IdOfTheDefaultButtonForControlsInThisPanel"

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.panel.defaultbutton.aspx