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 相关文章推荐
jQuery图片轮播的具体实现
Sep 11 Javascript
jQuery中:empty选择器用法实例
Dec 30 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
Google 地图API Map()构造器详解
Aug 06 Javascript
JavaScript用构造函数如何获取变量的类型名
Dec 23 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
js字符串类型String常用操作实例总结
Jul 05 Javascript
Layui 数据表格批量删除和多条件搜索的实例
Sep 04 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 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加MYSQL服务器
2006/10/09 PHP
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
php绘制一条直线的方法
2015/01/24 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
JQuery 动态扩展对象之另类视角
2010/05/25 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
详解js数组的完全随机排列算法
2016/12/16 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
微信小程序实现蓝牙打印
2019/09/23 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
OpenLayer学习之自定义测量控件
2020/09/28 Javascript
python多进程和多线程究竟谁更快(详解)
2017/05/29 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
浅析PyTorch中nn.Module的使用
2019/08/18 Python
Python读写文件模式和文件对象方法实例详解
2019/09/17 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
python简单实现最大似然估计&amp;scipy库的使用详解
2020/04/15 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
什么是类的返射机制
2016/02/06 面试题
热能动力工程毕业生自荐信
2013/11/07 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
投诉书范文
2015/07/02 职场文书