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 相关文章推荐
判断日期是否能跨月查询的js代码
Jul 25 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
JavaScript中DOM详解
Apr 13 Javascript
VUE实现日历组件功能
Mar 13 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
Nov 22 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
详解js的视频和音频采集
Aug 09 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
JS页面获取 session 值,作用域和闭包学习笔记
Oct 16 Javascript
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
PHP实现批量清空删除指定文件夹所有内容的方法
2017/05/30 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
JS刷新框架外页面七种实现代码
2013/02/18 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
浅谈javascript中replace()方法
2015/11/10 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
分析JavaScript数组操作难点
2017/12/18 Javascript
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
浅析JS中回调函数及用法
2018/07/25 Javascript
微信小程序 如何保持登录状态
2019/08/16 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
python是否适合网页编程详解
2019/10/04 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
python3利用Axes3D库画3D模型图
2020/03/25 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
老教师工作总结的自我评价
2013/09/27 职场文书
生日邀请函范文
2014/01/13 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
物业品质提升方案
2014/06/08 职场文书
校车安全责任书
2014/08/25 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
收入证明申请书
2015/06/12 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书