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 22 Javascript
javascript 写类方式之七
Jul 05 Javascript
javascript 年月日联动实现核心代码
Dec 21 Javascript
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
Dec 18 Javascript
JS实现读取xml内容并输出到div中的方法示例
Apr 19 Javascript
Javascript作用域和作用域链原理解析
Mar 03 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
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
php把数组值转换成键的方法
2015/07/13 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
js玩一玩WSH吧
2007/02/23 Javascript
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
解决nodejs的npm命令无反应的问题
2018/05/17 NodeJs
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
分享6个隐藏的python功能
2017/12/07 Python
Python pandas常用函数详解
2018/02/07 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
python中报错&quot;json.decoder.JSONDecodeError: Expecting value:&quot;的解决
2019/04/29 Python
Python 整行读取文本方法并去掉readlines换行\n操作
2020/09/03 Python
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
init进程的作用
2015/08/20 面试题
岗位职责的含义
2013/11/17 职场文书
应届专科生个人的自我评价
2014/01/05 职场文书
竞争上岗实施方案
2014/03/21 职场文书
体操比赛口号
2014/06/10 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
个人事迹材料范文
2014/12/29 职场文书
技术员个人工作总结
2015/03/03 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
Redis分布式锁的7种实现
2022/04/01 Redis
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL