每次当用户在一个文本框输入完数据后,更希望在敲入回车键后,焦点会自动移动到下一个文本框。
通过下面的代码可以实现这种切换的效果。
首先我们来看界面:
界面代码:
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
="联系电话: "
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转换成html控件为<input type="text"/>
7
$("input:text").bind("keydown",
function
(e) {
8
if
(e.which == 13) {
//
获取Enter键值
9
e.preventDefault();
//
阻止表单按Enter键默认行为,防止按回车键提交表单
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>

