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 相关文章推荐
限制文本字节数js代码
Mar 06 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
jQuery+HTML5美女瀑布流布局实现方法
Sep 21 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 Javascript
AngularJS 避繁就简的路由
Jul 01 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 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入门基础之php代码写法
2011/12/30 PHP
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
js中replace的用法总结
2013/12/27 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
js跳转页面方法总结
2014/01/29 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
es6 字符串String的扩展(实例讲解)
2017/08/03 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
Python中用sleep()方法操作时间的教程
2015/05/22 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
eclipse创建python项目步骤详解
2019/05/10 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
python excel和yaml文件的读取封装
2021/01/12 Python
is_file和file_exists效率比较
2021/03/14 PHP
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
营销团队口号
2014/06/06 职场文书
大专生自荐书范文
2014/06/22 职场文书
学习心得体会
2019/06/20 职场文书
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js