基于Jquery的实现回车键Enter切换焦点


Posted in Javascript onSeptember 14, 2010

接下来我们使用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切换焦点
作者:灵动生活
Javascript 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
原生js事件的添加和删除的封装
Jul 01 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 Javascript
vue+iview实现手机号分段输入框
Mar 25 Vue.js
js输出列表实现代码
Sep 12 #Javascript
JavaScript日历实现代码
Sep 12 #Javascript
某页码显示的helper 少量调整,另附js版
Sep 12 #Javascript
网页中CDATA标记的说明
Sep 12 #Javascript
JavaScript小技巧 2.5 则
Sep 12 #Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 #Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 #Javascript
You might like
开发大型PHP项目的方法
2006/10/09 PHP
php中的三元运算符使用说明
2011/07/03 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
JavaScript使用prototype属性实现继承操作示例
2020/05/22 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
python实现k-means聚类算法
2018/02/23 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
世界最大的海报和艺术印刷商店:AllPosters.com
2017/02/01 全球购物
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
父母对孩子的寄语
2014/04/09 职场文书
承诺书格式范文
2014/06/03 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
运动会通讯稿100字
2015/07/20 职场文书
教师节校长致辞
2015/07/31 职场文书
HAM-2000摩机图
2021/04/22 无线电
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP