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中产生固定结果的函数优化技巧
Jan 16 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
JS实现间歇滚动的运动效果实例
Dec 22 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
浅谈angular4 ng-content 中隐藏的内容
Aug 18 Javascript
Vue组件化开发思考
Feb 02 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
redux处理异步action解决方案
Mar 22 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 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上传图片、删除图片实现代码
2010/05/12 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
js onkeypress与onkeydown 事件区别详细说明
2012/12/13 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
js判断url是否有效的两种方法
2014/03/04 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
解决vue中使用less/sass及使用中遇到无效的问题
2020/10/24 Javascript
用Python制作检测Linux运行信息的工具的教程
2015/04/01 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
详解Python文本操作相关模块
2017/06/22 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
python获取中文字符串长度的方法
2018/11/14 Python
python  logging日志打印过程解析
2019/10/22 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Pycharm中安装Pygal并使用Pygal模拟掷骰子(推荐)
2020/04/08 Python
什么是python的id函数
2020/06/11 Python
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
机工车间主任岗位职责
2014/03/05 职场文书
学生评语大全
2014/04/18 职场文书
聘用意向书
2014/07/29 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
2015年安全月活动总结
2015/03/26 职场文书
分享python函数常见关键字
2022/04/26 Python