5テキストボックス、2ボタン。ボタンにテキストボックスを割り当てる方法は？

Question

ユーザーにテキストボックスを使用してEnterキーを押してもらいたいです。課題は、5つのテキストボックスと2つのオプションがあることです。 3つのテキストボックスは1つのボタンに属し、2つのテキストボックスは他のボタンに属します。ユーザーがEnterキーを押したときに入力したテキストボックスに従って、特定のボタンをどのようにトリガーしますか？

Answer 1

これは、私が別のユーザータイプの2つの異なるログインフォームを持つページを自分で作成したものです。私がしたことは、2つのフォームをそれぞれ独自のASP Panelコントロールと、DefaultButtonを設定しているパネルで区別することでした。こうすることで、フォームに入力してEnterキーを押すと、正しいボタンで送信されます。

例：

<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：ここではあなたのテキストボックスにONKEYPRESSプロパティを割り当てることによって、それを行う方法のanother methodです。 これは私が例 TOP AT

を説明したものとは別のソリューションです：

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 + "')"); 

をコードが背後にある次のコードを生成します。これはかなりあるjQueryを使用して

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

Answer 2

を達成しやすい：

$(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(); 
    }); 
}); 

ASP.NET ボタンコントロールを使用している場合、これらのコントロールにはUseSubmitBehaviorのプロパティを必ずfalseに設定してください。

Answer 3

この状況では、関連するテキストボックスとパネル内のボタンをグループ化します。 Panelには、使用できるDefaultButtonプロパティがあります。 DefaultButton = "IdOfTheDefaultButtonForControlsInThisPanel"

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