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 常用函数
Dec 30 Javascript
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
基于JavaScript实现瀑布流效果
Mar 29 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 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
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
node模块机制与异步处理详解
2016/03/13 Javascript
解析ajaxFileUpload 异步上传文件简单使用
2016/12/30 Javascript
jquery 手势密码插件
2017/03/17 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
解析vue中的$mount
2017/12/21 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
2018/08/08 jQuery
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
python读取oracle函数返回值
2016/07/18 Python
简单易懂的python环境安装教程
2017/07/13 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python 回溯法模板详解
2020/02/26 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
优秀毕业生求职信范文
2014/01/02 职场文书
医院保洁服务方案
2014/06/11 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
学校群众路线专项整治方案
2014/10/31 职场文书
2015年司机年终工作总结
2015/05/14 职场文书