purpose: 一開始游標就在TextBox裡面, 按Enter會移動到下一個TextBox,最後執行Button_clic
前提: 用jQuery做，所以專案要安裝jQuery或引用jQuery
step1: 設定各元件的tabIndex屬性
<body>
<form id="form1" runat="server">
<div id="testContent">一開始游標就在TextBox裡面, 按Enter會移動到下一個TextBox,最後執行Button_click</div>
step0.<asp:TextBox ID="text_box_0" runat="server" TabIndex="0"></asp:TextBox>
<br />
step4.<asp:TextBox ID="text_box_4" runat="server" TabIndex="4"></asp:TextBox>
<br />
step1.<asp:TextBox ID="text_box_1" runat="server" TabIndex="1"></asp:TextBox>
<br />
step3.<asp:TextBox ID="text_box_3" runat="server" TabIndex="3"></asp:TextBox>
<br />
step2.<asp:TextBox ID="text_box_2" runat="server" TabIndex="2"></asp:TextBox>
<br />
step5.<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" TabIndex="5" />
<br />
Counter<asp:Label ID="Label1" runat="server"></asp:Label>
<br />
</form>
</body>
step2: 引用jQuery(以下寫在head裡面), 此jQuery路徑放在/Script目錄內
<script src="../Scripts/jquery-3.1.1.js"></script>
step3: 各textbox加入enter2tab的方法(將jquery.enter2tab.js加入專案,與此程式同一個目錄下)
<script type="text/javascript" src="jquery.enter2tab.js"></script>
<script type="text/javascript">
$(document).ready(function() {
Page_Init();
});
function Page_Init() {
$('input[type=text][id^=text_box]').enter2tab();//只有text_box*才有用jQuery設定,button並沒有設定
}
</script>
step4: codebehind，設定預設游標位置，撰寫按鈕要做的事情
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
initControl();
}
private void initControl()
{
//先設定TextBox1的TabIndex屬性
//然後使用TextBox1.Focus方法，設定焦點
text_box_0.Focus();
}
protected void Button1_Click(object sender, EventArgs e)
{
if (Label1.Text == "") Label1.Text = "0";//這樣就可以知道跑了幾次click
Label1.Text = (int.Parse(Label1.Text) + 1).ToString();
}
參考資料:
http://kevintsengtw.blogspot.tw/2011/10/jquery-entertab.html
