jquery回车键enter切换焦点如何实现

发布时间:2019-12-20编辑:脚本学堂
本文介绍了jquery回车键enter切换焦点的实现方法,有需要的朋友参考下。

系统默认情况下,使用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'事件
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、 运行程序
jquery回车键enter切换焦点

那页面中如果有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、 运行效果,如下图:
jquery回车键enter切换焦点2