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 相关文章推荐
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
javascript拖拽应用实例
Mar 25 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
Element Card 卡片的具体使用
Jul 26 Javascript
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 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 模拟登陆MSN并获得用户信息
2009/05/16 PHP
启用Csrf后POST数据时出现的400错误
2015/07/05 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
2017/04/07 jQuery
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
vue如何获取点击事件源的方法
2017/08/10 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
npm的lock机制解析
2019/06/20 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
keras中模型训练class_weight,sample_weight区别说明
2020/05/23 Python
PyTorch-GPU加速实例
2020/06/23 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
教师求职信范文分享
2013/12/27 职场文书
班队活动设计方案
2014/01/30 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
社区党支部公开承诺书
2015/04/29 职场文书