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 相关文章推荐
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
js实现跨域的多种方法
Dec 25 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
js实现常用排序算法
Aug 09 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
angularjs点击图片放大实现上传图片预览
Feb 24 Javascript
webpack4打包vue前端多页面项目
Sep 17 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
JS中FormData类实现文件上传
Mar 27 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
php时间不正确的解决方法
2008/04/09 PHP
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
jQuery参数列表集合
2011/04/06 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
2016/01/12 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
2017/01/05 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
如何实现vue的tree组件
2020/12/03 Vue.js
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Python调用C语言的方法【基于ctypes模块】
2018/01/22 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
python使用 zip 同时迭代多个序列示例
2019/07/06 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
信息与计算科学专业推荐信
2014/02/23 职场文书
销售活动策划方案
2014/08/26 职场文书
国庆促销活动总结
2014/08/29 职场文书
长城导游词400字
2015/01/30 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书