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 相关文章推荐
强制设为首页代码
Jun 19 Javascript
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
Javascript代码在页面加载时的执行顺序介绍
May 03 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
通过示例彻底搞懂js闭包
Aug 10 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
Angular4 Select选择改变事件的方法
Oct 09 Javascript
jQuery中DOM常见操作实例小结
Aug 01 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
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
php中switch与ifelse的效率区别及适用情况分析
2015/02/12 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
2017/05/11 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
Python 中 Meta Classes详解
2016/02/13 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
python numpy 反转 reverse示例
2019/12/04 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
Pytorch十九种损失函数的使用详解
2020/04/29 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
HTML5之SVG 2D入门2—图形绘制(基本形状)介绍及使用
2013/01/30 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
财务工作个人求职的自我评价
2013/12/19 职场文书
军训心得体会
2013/12/31 职场文书
简短证婚人证婚词
2014/01/09 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
群众路线教育实践活动学习笔记内容
2014/11/06 职场文书
辞职信的写法
2015/02/27 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
浅析JavaScript中的变量提升
2022/06/01 Javascript