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 相关文章推荐
text-align:justify实现文本两端对齐 兼容IE
Aug 19 Javascript
AngularJS实现动态编译添加到dom中的方法
Nov 04 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
Vue2.0 vue-source jsonp 跨域请求
Aug 04 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
vue select二级联动第二级默认选中第一个option值的实例
Jan 10 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 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
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
PHP结合Mysql数据库实现留言板功能
2016/03/04 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
function, new function, new Function之间的区别
2007/03/08 Javascript
javaScript 数值型和字符串型之间的转换
2009/07/25 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
关于input全选反选恶心的异常情况
2016/07/24 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
jQuery UI实现动画效果代码分享
2018/08/19 jQuery
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
[01:41]DOTA2 2015国际邀请赛中国区预选赛第三日战报
2015/05/28 DOTA
对Python2与Python3中__bool__方法的差异详解
2018/11/01 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
Python chardet库识别编码原理解析
2020/02/18 Python
django实现日志按日期分割
2020/05/21 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
鲜果饮品店创业计划书
2014/01/21 职场文书
2014自荐信的写作技巧
2014/01/28 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
岗位竞聘书范文
2014/03/31 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
2014年教研组工作总结
2014/11/26 职场文书
幼儿学前班评语
2014/12/29 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
Nginx 反向代理解决跨域问题多种情况分析
2022/01/18 Servers
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL