系统默认情况下，使用Tab按键切换页面元素的焦点，有没有想过回车键Enter也可以实现这种功能，并且具有良好的用户体验。接下来我们使用Jquery实现回车键Enter切换焦点，此代码在常用浏览器IE7, IE8, Firefox 3, Chrome 2 和 Safari 4测试通过。
使用的开发工具是微软VS2010+Jquery框架。
实现步骤如下
1、
首先引用
Jquery
类库
<script
src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
2、
Javascript
代码
|
<script type="text/javascript">
$(function () {
$('input:text:first').focus();
var $inp = $('input:text');
$inp.bind('keydown', function (e) {
var key = e.which;
if (key == 13) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
$(":input:text:eq(" + nxtIdx + ")").focus();
}
});
});
</script>
|
分析：
$(
'input:text:first').focus();
页面初始化时，焦点定位第一个文本框内
var $inp = $(
'input:text');
取的type=文本框的元素集合
$inp.bind( 'keydown', function (e) {}
给文本框集合绑定'keydown'事件
$inp.bind( 'keydown', function (e) {}
给文本框集合绑定'keydown'事件
var key = e.which;
取的当前按下的键值 比如Enter的键值=13
e.preventDefault();
可以阻止它的默认行为的发生而发生其他的事情，在这里我们组织PostBack发生，而是切换焦点。另外一个相近的方法是stopPropagation，它起到阻止js事件冒泡的作用。
事件代理用到了
两个
在JavaSciprt事件中常被忽略的特性：事件冒泡以及目
标
元素。
当
一
个
元素上的事件被
触发
的
时
候，比如
说
鼠
标
点
击
了一
个
按
钮
，同
样
的事件
将会
在那
个
元素的所有祖先元素中被
触发
。
这
一
过
程被
称为
事件冒泡；
这个
事件
从
原始元素
开
始一直冒泡到DOM
树
的最上
层
。
对
任何一
个
事件
来说
，其目
标
元素都是原始元素，在我
们
的
这个
例子中也就是按
钮
。目
标
元素
它
在我
们
的事件
对
象中以
属
性的形式出
现
。使用事件代理的
话
我
们
可以把事件
处
理器添加到一
个
元素上，等待事件
从它
的子
级
元素里冒泡上
来
，
并
且可以很方便地判
断
出
这个
事件是
从哪个
元素
开
始的。
var nxtIdx = $inp.index(
this) + 1;
取的元素集合inp中的下一个元素索引
$(
":input:text:eq(" + nxtIdx + ")").focus();
定位焦点到集合的下一个元素
3.
、
HTML
代码
|
<div>
<asp:TextBox ID="txt1" runat="server" /><br />
<asp:TextBox ID="txt2" runat="server" /><br />
<asp:TextBox ID="txt3" runat="server" /><br />
<asp:TextBox ID="txt4" runat="server" /><br />
</div>
|
分析：页面上存放四个文本框
3、
运行程序
那页面中如果有TextArea 元素，我们如何使用Enter切换焦点呢，办法是有的，如下充分运用了Jquery的一些特性。
4、
HTML
代码
|
<div>
<asp:TextBox ID="tb1" runat="server" class="cls" /><br />
<asp:TextBox ID="tb2" runat="server" class="cls" /><br />
<asp:TextBox ID="tb3" TextMode="MultiLine" runat="server" class="cls" /><br />
<asp:TextBox ID="tb4" runat="server" class="cls" /><br />
</div>
|
分析：
页面中所以的TextBox 引用Class=”cls”,便于后期的对页面元素的Jquery查询。
5、
Javascript
代码
|
<script
type="text/javascript">
$(function () {
$('input:text:first').focus();
var $inp = $('.cls');
$inp.bind('keydown', function (e) {
var key = e.which;
if (key == 13) {
e.preventDefault();
var nxtIdx = $inp.index(this) + 1;
$(".cls:eq(" + nxtIdx + ")").focus();
}
});
});
</script>
|
分析：
var $inp = $(
'.cls');
取的样式为cls的所有元素 赋值给变量inp
6、
运行效果
本文转自 灵动生活 51CTO博客，原文链接：http://blog.51cto.com/smartlife/449937，如需转载请自行联系原作者
