基于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 window.opener返回父页面的应用
Oct 24 Javascript
jquery动态加载图片数据练习代码
Aug 04 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
Jun 13 jQuery
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
Three.js中网格对象MESH的属性与方法详解
Sep 27 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
Sep 06 Javascript
JavaScript实现左右滚动电影画布
Feb 06 Javascript
Vue实现Layui的集成方法步骤
Apr 10 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 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
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
PHP线程的内存回收问题
2016/07/08 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
2015/06/19 Javascript
JSON相关知识汇总
2015/07/03 Javascript
浅谈addEventListener和attachEvent的区别
2016/07/14 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
2017/01/05 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
js a标签点击事件
2017/03/30 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
React Component存在的几种形式详解
2018/11/06 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
详解Python中heapq模块的用法
2016/06/28 Python
Python的SimpleHTTPServer模块用处及使用方法简介
2018/01/22 Python
python 标准差计算的实现(std)
2019/07/29 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
学校安全管理责任书
2014/07/23 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
银行贷款收入证明
2014/10/17 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书
Python的flask接收前台的ajax的post数据和get数据的方法
2021/04/12 Python
Golang获取List列表元素的四种方式
2022/04/20 Golang
教你nginx跳转配置的四种方式
2022/07/07 Servers