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 相关文章推荐
JavaScript 继承机制的实现(待续)
May 18 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
javascript中的面向对象
Mar 30 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 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
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
js一组验证函数
2008/12/20 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
详解Python中的type()方法的使用
2015/05/21 Python
python实现发送邮件及附件功能
2021/03/02 Python
Python OS模块实例详解
2019/04/15 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
利用python实现PSO算法优化二元函数
2019/11/13 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
会议欢迎词
2015/01/23 职场文书
雾霾停课通知
2015/04/24 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
标枪加油稿
2015/07/22 职场文书
高一英语教学反思
2016/03/03 职场文书
导游词之无锡唐城
2019/12/12 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL