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 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
javascript中的事件代理初探
Mar 08 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
canvas知识总结
Jan 25 Javascript
微信小程序之页面跳转和参数传递的实现
Sep 29 Javascript
JavaScript 中定义函数用 var foo = function () {} 和 function foo()区别介绍
Mar 01 Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 Javascript
react国际化react-intl的使用
May 06 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下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
PHP学习笔记之数组篇
2011/06/28 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
vue+axios实现文件下载及vue中使用axios的实例
2018/09/21 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
python创建列表和向列表添加元素的实现方法
2017/12/25 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
python高效过滤出文件夹下指定文件名结尾的文件实例
2018/10/21 Python
解决使用export_graphviz可视化树报错的问题
2019/08/09 Python
pygame实现俄罗斯方块游戏(基础篇3)
2019/10/29 Python
python3让print输出不换行的方法
2020/08/24 Python
Pandas之缺失数据的实现
2021/01/06 Python
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
酒店总经理助理岗位职责
2014/02/01 职场文书
关爱老人标语
2014/06/21 职场文书
机动车登记业务委托书
2014/10/08 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
确保工程质量承诺书
2015/04/29 职场文书
辅导员学期工作总结
2015/08/14 职场文书
2016小学新学期寄语
2015/12/04 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python
mysql中整数数据类型tinyint详解
2021/12/06 MySQL
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server