jQuery简单获取键盘事件的方法


Posted in Javascript onJanuary 22, 2016

本文实例讲述了jQuery简单获取键盘事件的方法。分享给大家供大家参考,具体如下:

一、我们什么时候要用到获取键盘事件

做web的时候,为了更人性的设计,我们有的时候会用到键盘事件。例如:输入框下拉提示框,通过键盘的上下键盘来选择自己想要的内容,google的输入框的下拉提示。当我们浏览相册的时候,我们可以能过键盘的左右键,来查看相片。当我们浏览长篇小说,用鼠标滚动很容易不知道看到哪一个行了,可以通键盘上下键来进行翻页,这些小细节也是非常重要的。做网站很大程度在于细节的处理。

二、jquery的键盘事情函数种类

1. keydown事件是在键盘按下时触发的事件
2. keyup事件是在按下键弹起时触发的事件
3. keypress事件是在键盘按下时触发的事件

keypress和keydown在功能差不多,但是在获取事件的内容上有所不同。

二、举例说明

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr" lang="utf-8">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="jquery-1.3.2.js" type="text/javascript"></script>
</head>
<body>
<input value="fi" name="search" id="search_input" maxlength="50" autocomplete="off">
</body>
</html>
<script type="text/javascript">
 $('#search_input')
 .keypress(function(event){
 alert("keypress");
 })
 .keydown(function(event){
 alert("keydown");
 })
 .keyup(function(event){
 alert("keyup");
 });
</script>

三、试验结果

1. 在上面的输入框中,输入一个字母r时,第一次会弹出keydown,以后都会提示keypress
2. 当我们按下pg dn?时,会先弹出keyup然后在弹出keydown
3. 当我们按下shift+c时,只会弹出keypress
4. 当我们按下ctrl+alt时,就不会出现keypress,第一次会出现二个keydown,第二次按的时候,先出现keyup,然后在出现keydown

可能性有很多,我们只要试一试常用的?就可以了。

四、获得键盘事件对应的ASCII值

<script type="text/javascript">
 $('#search_input')
 .keydown(function(event){
 alert(event.keyCode);
 })
</script>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
ext实现完整的登录代码
Aug 08 Javascript
jquery 分页控件实现代码
Nov 30 Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
原生js编写2048小游戏
Mar 17 Javascript
ligerUI---ListBox(列表框可移动的实例)
Nov 28 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
node.js之基础加密算法模块crypto详解
Sep 11 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
Jan 22 #Javascript
CSS或者JS实现鼠标悬停显示另一元素
Jan 22 #Javascript
鼠标悬停小图标显示大图标
Jan 22 #Javascript
在JavaScript中call()与apply()区别
Jan 22 #Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 #Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 #Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 #Javascript
You might like
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
javascript options属性集合操作代码
2009/12/28 Javascript
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
jquery实现简易的移动端验证表单
2015/11/08 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
前端jquery部分很精彩
2016/05/03 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
JS验证不重复验证码
2017/02/10 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
如何更好的编写js async函数
2018/05/13 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
详解jquery和vue对比
2019/04/16 jQuery
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
Python操作SQLite简明教程
2014/07/10 Python
Python数据分析中Groupby用法之通过字典或Series进行分组的实例
2017/12/08 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
python 监控logcat关键字功能
2020/09/04 Python
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
新加坡网上化妆品店:Best Buy World
2018/05/18 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
应届大专毕业生自我鉴定
2014/04/08 职场文书
人力资源管理毕业求职信
2014/08/05 职场文书
竞选大队干部演讲稿
2014/09/11 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
小学语文复习计划
2015/01/19 职场文书