基于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 相关文章推荐
做网页的一些技巧(续)
Feb 01 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
关于js数组去重的问题小结
Jan 24 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
Vue2.0权限树组件实现代码
Aug 29 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 Javascript
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
Email+URL的判断和自动转换函数
2006/10/09 PHP
php session_start()出错原因分析及解决方法
2013/10/28 PHP
PHP实现的json类实例
2015/07/28 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
jQuery视差滚动效果网页实现方法经验总结
2016/09/29 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
Jquery获取radio选中的值
2017/05/05 jQuery
Javascript实现base64的加密解密方法示例
2017/06/27 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
利用vue.js把静态json绑定bootstrap的table方法
2018/08/28 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
了解JavaScript函数中的默认参数
2019/05/30 Javascript
解决layer.open后laydate失效的问题
2019/09/06 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
python连接MySQL数据库实例分析
2015/05/12 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
wxPython的安装与使用教程
2018/08/31 Python
python绘制中国大陆人口热力图
2018/11/07 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
python requests.post带head和body的实例
2019/01/02 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
前台文员我鉴定
2014/01/12 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
只用Python就可以制作的简单词云
2021/06/07 Python
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
利用Python实现Picgo图床工具
2021/11/23 Python
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS