每次當(dāng)用戶在一個(gè)文本框輸入完數(shù)據(jù)后，更希望在敲入回車鍵后，焦點(diǎn)會(huì)自動(dòng)移動(dòng)到下一個(gè)文本框。
通過(guò)下面的代碼可以實(shí)現(xiàn)這種切換的效果。
首先我們來(lái)看界面：
界面代碼：
View Code
1
<
body
>
2
<
form
id
="form1"
runat
="server"
>
3
<
div
align
="center"
>
4
<
fieldset
style
="width: 400px; height: 200px;"
>
5
<
table
cellpadding
="3"
cellspacing
="3"
border
="0"
>
6
<
tr
>
7
<
td
>
8
<
asp:Label
ID
="lblName"
Text
="姓名: "
runat
="server"
></
asp:Label
>
9
</
td
>
10
<
td
>
11
<
asp:TextBox
ID
="txtName"
Width
="200px"
runat
="server"
></
asp:TextBox
>
12
</
td
>
13
</
tr
>
14
<
tr
>
15
<
td
>
16
<
asp:Label
ID
="lblAddress"
Text
="地址: "
runat
="server"
></
asp:Label
>
17
</
td
>
18
<
td
>
19
<
asp:TextBox
ID
="txtAddress"
Width
="200px"
runat
="server"
></
asp:TextBox
>
20
</
td
>
21
</
tr
>
22
<
tr
>
23
<
td
>
24
<
asp:Label
ID
="lblContact"
Text
="聯(lián)系電話: "
runat
="server"
></
asp:Label
>
25
</
td
>
26
<
td
>
27
<
asp:TextBox
ID
="txtContact"
Width
="200px"
runat
="server"
></
asp:TextBox
>
28
</
td
>
29
</
tr
>
30
<
tr
>
31
<
td
>
32
<
asp:Label
ID
="lblEmail"
Text
="電子郵箱: "
runat
="server"
></
asp:Label
>
33
</
td
>
34
<
td
>
35
<
asp:TextBox
ID
="txtEmail"
Width
="200px"
runat
="server"
></
asp:TextBox
>
36
</
td
>
37
</
tr
>
38
<
tr
>
39
<
td
>
40
</
td
>
41
<
td
>
42
<
asp:Button
ID
="btnSubmit"
Text
="提交"
runat
="server"
/>
43
<
asp:Button
ID
="btnReset"
Text
="重置"
runat
="server"
/>
44
</
td
>
45
</
tr
>
46
</
table
>
47
</
fieldset
>
48
</
div
>
49
</
form
>
50
</
body
>
腳本代碼：
1
<head runat="server">
2
<title>Recipe2</title>
3
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
4
<script type="text/javascript">
5
$(document).ready(
function
() {
6
$("input:text:first").focus();
//
TextBox轉(zhuǎn)換成html控件為<input type="text"/>
7
$("input:text").bind("keydown",
function
(e) {
8
if
(e.which == 13) {
//
獲取Enter鍵值
9
e.preventDefault();
//
阻止表單按Enter鍵默認(rèn)行為，防止按回車鍵提交表單
10
var
nextIndex = $("input:text").index(
this
) + 1;
11
$("input:text")[nextIndex].focus();
12
}
13
});
14
15
$("#<%=btnReset.ClientID%>").click(
function
() {
16
$("form")[0].reset();
17
});
18
});
19
</script>
20
</head>
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
