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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
Mar 10 Javascript
JavaScript 事件查询综合
Jul 13 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
Node.js安装配置图文教程
May 10 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
基于JavaScript实现数码时钟效果
Mar 30 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
前端如何实现动画过渡效果
Feb 05 Javascript
详解Vue的sync修饰符
May 15 Vue.js
vue 自定义组件添加原生事件
Apr 21 Vue.js
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
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
使用Angular.js实现简单的购物车功能
2016/11/21 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
ES6中的箭头函数实例详解
2017/04/06 Javascript
JavaScript递归算法生成树形菜单
2017/08/15 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
python 测试实现方法
2008/12/24 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
django 将model转换为字典的方法示例
2018/10/16 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
python字典通过值反查键的实现(简洁写法)
2020/09/30 Python
python生成word合同的实例方法
2021/01/12 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
感恩父母的演讲稿
2014/05/06 职场文书
招标授权委托书样本
2014/09/23 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
通讯稿范文
2015/07/22 职场文书
学习型家庭事迹材料(2016精选版)
2016/02/29 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL