本文介绍了一种使用jQuery实现的表单元素自动聚焦的方法，通过键盘事件捕捉回车键操作，并使表单中的下一个元素自动获取焦点。此外，还实现了当提交按钮获取焦点时直接提交表单的功能。
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(function(){
var length = $(":input").length;
$(":input").keyup(function(e) {
var key = e.which;
if (13 == key) {
var index = $(":input").index(this);
var newIndex = index + 1;
if(length == newIndex)
{
newIndex = 0;
}
$(":input:eq(" + newIndex + ")").focus();
}
});
});
</script>
</head>
<body>
<form id="frm1">
<input type="text" /><br/>
<input type="text" /><br/>
<select>
<option>选项一</option>
<option>选项二</option>
</select>
<br/>
<input id="btn" type="button" value="提交" />
</form>
</body>
注意点
①$(":input")表示表单内所有的控件，区别于$("input")只拿到input标签，拿不到select等。
②index函数是jQuery中很有用的一个函数。
但实际情况中我们并不一定要循环获得焦点，当提交按钮获得焦点的时候，我们就提交表单。
$(function(){
$(":input").keyup(function(e) {
var key = e.which;
if (13 == key) {
var index = $(":input").index(this);
var newIndex = index + 1;
$(":input:eq(" + newIndex + ")").focus();
}
});
$("#btn").click(function(){
$("frm1").submit();
});
});
扫一扫
538
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
