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 相关文章推荐
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
必备的JS调试技巧汇总
Jul 20 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
vue移动端路由切换实例分析
May 14 Javascript
浅谈React之状态(State)
Sep 19 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 Javascript
小程序实现tab标签页
Nov 16 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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
Laravel5.5 动态切换多语言的操作方式
2019/10/25 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
javascript 类方法定义还是有点区别
2009/04/15 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
JS简单实现多级Select联动菜单效果代码
2015/09/06 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
Bootstrap Chart组件使用教程
2016/04/28 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
Angularjs中date过滤器失效的问题及解决方法
2018/07/06 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
记一次vue-webpack项目优化实践详解
2019/02/17 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
vue data有值,但是页面{{}} 取不到值的解决
2020/11/09 Javascript
在Python下尝试多线程编程
2015/04/28 Python
Python生成随机数组的方法小结
2017/04/15 Python
Python3.6简单反射操作示例
2018/06/14 Python
Python中断多重循环的思路总结
2019/10/04 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
Python环境配置实现pip加速过程解析
2020/11/27 Python
animation和transition的区别
2020/10/12 HTML / CSS
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
大学生冰淇淋店商业计划书
2014/01/14 职场文书
上班玩手机检讨书
2014/02/17 职场文书
公司门卫工作职责
2014/06/28 职场文书
营销与策划实训报告
2014/11/05 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang
用php如何解决大文件分片上传问题
2021/07/07 PHP