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中this关键字(翻译+自我理解)
Oct 20 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
Jan 05 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
javascript原型链学习记录之继承实现方式分析
May 01 Javascript
Vue.js实现备忘录功能
Jun 26 Javascript
a标签调用js的方法总结
Sep 05 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
使用vant的地域控件追加全部选项
Nov 03 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
一些PHP写的小东西
2006/12/06 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
js 函数的副作用分析
2011/08/23 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
node.js中的fs.realpath方法使用说明
2014/12/16 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
2016/10/11 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
庆元旦迎新年广播稿
2014/02/18 职场文书
会计人员岗位职责
2014/03/19 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
啦啦队口号大全
2014/06/16 职场文书
教师党员自我剖析材料
2014/09/29 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
为什么中国式养孩子很累?
2019/08/07 职场文书
java泛型通配符详解
2021/07/25 Java/Android