基于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实现非常简单的焦点图切换特效实例
May 07 Javascript
javascript拖拽应用实例
Mar 25 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
Dec 08 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
vue实现微信获取用户信息的方法
Mar 21 Javascript
读懂CommonJS的模块加载
Apr 19 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
May 07 Javascript
全网小程序接口请求封装实例代码
Nov 06 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 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
Syphon 秘笈
2021/03/03 冲泡冲煮
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
javascript 对象的定义方法
2007/01/10 Javascript
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
如何用JavaScript定义一个类
2014/09/12 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
详解a++和++a的区别
2017/08/30 Javascript
实现div内部滚动条滚动到底部和顶部的代码
2017/11/15 Javascript
JQuery常见节点操作实例分析
2019/05/15 jQuery
vue按需加载实例详解
2019/09/06 Javascript
Openlayers学习之加载鹰眼控件
2020/09/28 Javascript
tensorflow训练中出现nan问题的解决
2018/02/10 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
python 实现多维数组转向量
2019/11/30 Python
python将时分秒转换成秒的实例
2019/12/07 Python
Python读取分割压缩TXT文本文件实例
2020/02/14 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
Python测试框架:pytest学习笔记
2020/10/20 Python
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
博士生入学考试推荐信
2013/11/17 职场文书
优秀党员获奖感言
2014/02/18 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
公司员工奖惩制度
2015/08/04 职场文书
商场广播稿范文
2015/08/19 职场文书
初中班主任心得体会
2016/01/07 职场文书