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 相关文章推荐
top.location.href 没有权限 解决方法
Aug 05 Javascript
关于javascript中的parseInt使用技巧
Sep 03 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
May 25 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 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实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
php实现图片压缩处理
2020/09/09 PHP
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
解决bootstrap中使用modal加载kindeditor时弹出层文本框不能输入的问题
2017/06/05 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
Python 实现选择排序的算法步骤
2018/04/22 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
Python数据可视化之画图
2019/01/15 Python
Python中字符串与编码示例代码
2019/05/20 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
2013/08/02 HTML / CSS
Timberland澳大利亚官网:全球领先的户外品牌
2019/12/10 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
冬季安全检查方案
2014/05/23 职场文书
保护水资源的标语
2014/06/17 职场文书
工会经费申请报告
2015/05/15 职场文书
美丽心灵观后感
2015/06/01 职场文书
vue引入Excel表格插件的方法
2021/04/28 Vue.js
Django分页器的用法你都了解吗
2021/05/26 Python