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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
js树形控件脚本代码
Jul 24 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
JS 对象(Object)和字符串(String)互转方法
May 20 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
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微信开发之自定义菜单实现
2016/11/18 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
JavaScript前端实现压缩图片功能
2020/03/06 Javascript
详解vite2.0配置学习(typescript版本)
2021/02/25 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
python设置环境变量的原因和方法
2019/06/24 Python
Ubuntu+python将nii图像保存成png格式
2019/07/18 Python
Django中提示消息messages的设置方式
2019/11/15 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
如何用python免费看美剧
2020/08/11 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
php优化查询foreach代码实例讲解
2021/03/24 PHP
材料加工工程求职信
2014/02/19 职场文书
班级旅游计划书
2014/05/03 职场文书
大学军训的体会
2014/11/08 职场文书
法定代表人资格证明书
2015/06/18 职场文书
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
python基础入门之字典和集合
2021/06/13 Python
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js