jquery 按键盘上的enter事件


Posted in Javascript onMay 11, 2014

接下来我们使用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事件冒泡的作用。

Javascript 相关文章推荐
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
Javascript 获取滚动条位置等信息的函数
Sep 08 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
JS时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
详解js静态资源文件请求的处理
Aug 01 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
Aug 24 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
layui实现显示数据表格、搜索和修改功能示例
Jun 03 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 #Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
May 11 #Javascript
基于Jquery实现键盘按键监听
May 11 #Javascript
js判断游览器类型及版本号的代码
May 11 #Javascript
jquery实现文本框数量加减功能的例子分享
May 10 #Javascript
js实现弹出窗口、页面变成灰色并不可操作的例子分享
May 10 #Javascript
多引号嵌套的变量命名的问题
May 09 #Javascript
You might like
phpwind中的数据库操作类
2007/01/02 PHP
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
JavaScript 高效运行代码分析
2010/03/18 Javascript
突发奇想的一个jquery插件
2010/11/19 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
禁用Enter键表单自动提交实现代码
2014/05/22 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
javascript中的this详解
2014/12/08 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
[02:47]3.19DOTA2发布会 国服成长历程回顾
2014/03/25 DOTA
python if not in 多条件判断代码
2016/09/21 Python
完美解决安装完tensorflow后pip无法使用的问题
2018/06/11 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
互动出版网:专业书籍
2017/03/21 全球购物
成品仓管员工作职责
2013/12/29 职场文书
2014年自我评价
2014/01/04 职场文书
高中美术教学反思
2014/01/19 职场文书
家长写给老师的建议书
2014/03/13 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
教师节感恩老师演讲稿
2014/08/28 职场文书
我的生日感言
2015/08/03 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python