基于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 相关文章推荐
js几个不错的函数 $$()
Oct 09 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
jquery遍历table的tr获取td的值实现方法
May 19 Javascript
基于bootstrap实现bootstrap中文网巨幕效果
May 02 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
May 01 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
JavaScript中reduce()的用法
May 11 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
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
《PHP编程最快明白》第八讲:php启发和小结
2010/11/01 PHP
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
php数字游戏 计算24算法
2012/06/10 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
2013/12/04 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
详谈javascript中的cookie
2015/06/03 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
Vue.js 插件开发详解
2017/03/29 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
webpack常用构建优化策略小结
2019/11/21 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
详细介绍Python中的偏函数
2015/04/27 Python
pycharm远程开发项目的实现步骤
2019/01/20 Python
python远程邮件控制电脑升级版
2019/05/23 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
软件生产职位结构化面试主要考察要素及面试题库
2015/06/12 面试题
员工培训邀请函
2014/01/11 职场文书
新学期班主任寄语
2014/01/18 职场文书
八项规定整改措施
2014/02/12 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js
浅谈TypeScript 索引签名的理解
2021/10/16 Javascript
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server