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 定时器调用传递参数的方法
Nov 12 Javascript
javascript下高性能字符串连接StringBuffer类
Aug 16 Javascript
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
Jun 02 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
vue多次循环操作示例
Feb 08 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
非常好的php目录导航文件代码
2006/10/09 PHP
Yii快速入门经典教程
2015/12/28 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
调用HttpHanlder的几种返回方式小结
2013/12/20 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
jquery制做精致的倒计时特效
2016/06/13 Javascript
JavaScript利用正则表达式替换字符串中的内容
2016/12/12 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
jquery实现简单拖拽效果
2020/07/20 jQuery
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
do you have any Best Practice for testing
2016/06/04 面试题
高中毕业自我鉴定
2013/12/16 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
组织生活会发言材料
2014/12/15 职场文书
自主招生自荐信格式
2015/03/04 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
Pygame Rect区域位置的使用(图文)
2021/11/17 Python
vue使用echarts实现折线图
2022/03/21 Vue.js
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL
在python中读取和写入CSV文件详情
2022/06/28 Python