jQuery响应enter键的实现思路


Posted in Javascript onApril 18, 2014

有时候我们有这样的需求:当用户在表单里数据完数据后,之间按enter键就可以执行查询或者保存的操作。实现的思路如下。

让你的form表单或需要响应enter键的区域处于div之间。形如:

<div class="top_inputbox"> 单位名称:<input class="inp" type="text" name="qureyBean.com_name" 
value="${qureyBean.com_name}" /> 
<a href="javascript:firstPage();">查询</a> 
</div>

响应键盘enter键的js:
$(".top_inputbox").keypress(function (e){ 
var code = event.keyCode; 
if (13 == code) { 
alert("响应键盘的enter事件"); 
} 
});

这样你就可以alert做你想做的操作了。

公司目前用的是这样的响应:

//回车快捷查询 
$(".top_inputbox").keypress(function (e) { 
var keyCode = e.keyCode ? e.keyCode : e.which ? e.which : e.charCode; 
if (keyCode == 13){ 
alert("响应键盘的enter事件"); 
} 
});

我在网上搜了一下,e.keyCode ? e.keyCode : e.which ? e.which : e.charCode 这是为了兼容性。
Javascript 相关文章推荐
优化 JavaScript 代码的方法小结
Jul 16 Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
jQuery弹出(alert)select选择的值
Apr 21 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
详解vue2.0模拟后台json数据
May 16 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 #Javascript
jQuery如何取id有.的值一般的方法是取不到的
Apr 18 #Javascript
用jquery仿做发微博功能示例
Apr 18 #Javascript
实例说明为什么不要行内使用javascript
Apr 18 #Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 #Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 #Javascript
JQuery each()嵌套使用小结
Apr 18 #Javascript
You might like
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
Javascript Objects详解
2014/09/04 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
2016/11/26 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
JavaScript表单验证完美代码
2017/03/02 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
详解vue项目中使用token的身份验证的简单实践
2019/03/08 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
Python编程之属性和方法实例详解
2015/05/19 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
独特的python循环语句
2016/11/20 Python
Python if语句知识点用法总结
2018/06/10 Python
python创建文件备份的脚本
2018/09/11 Python
Python文件监听工具pyinotify与watchdog实例
2018/10/15 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
python 实现波浪滤镜特效
2020/12/02 Python
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
群胜软件Java笔试题
2012/09/29 面试题
环境工程大学生个人的自我评价
2013/10/08 职场文书
计算机毕业大学生推荐信
2013/12/01 职场文书
优秀经理事迹材料
2014/02/01 职场文书
公司担保书范文
2014/05/21 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
董事会决议范本
2015/07/01 职场文书
军训通讯稿范文
2015/07/18 职场文书
七一表彰大会简报
2015/07/20 职场文书
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS