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学习笔记 操作jQuery对象 文档处理
Sep 19 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
node.js中 stream使用教程
Aug 28 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
JS实现简单的文字无缝上下滚动功能示例
Jun 22 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
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
从零开始的异世界生活:第二季延期后,B站上架了第二部剧场版
2020/05/06 日漫
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
繁简字转换功能
2006/07/19 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
JavaScript 2018 中即将迎来的新功能
2018/09/21 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
Python for i in range ()用法详解
2020/09/18 Python
python matplotlib imshow热图坐标替换/映射实例
2020/03/14 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
使用phonegap查找联系人的实现方法
2017/03/31 HTML / CSS
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
房地产融资计划书
2014/01/10 职场文书
业务员简历自我评价
2014/03/06 职场文书
党员承诺书内容
2014/03/26 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android