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 相关文章推荐
javascript中用星号表示预录入内容的实现代码
Jan 08 Javascript
js精度溢出解决方案
Dec 02 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
Node.js中如何合并两个复杂对象详解
Dec 31 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
使用JavaScript破解web
Sep 28 Javascript
JavaScript实现PC端横向轮播图
Feb 07 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
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
2015/02/18 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
利用Python抓取行政区划码的方法
2016/11/28 Python
Python常见数据类型转换操作示例
2019/05/08 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
pytorch 改变tensor尺寸的实现
2020/01/03 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
python 深度学习中的4种激活函数
2020/09/18 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
优秀团员个人事迹材料
2014/01/29 职场文书
师说教学反思
2014/02/07 职场文书
运输服务质量承诺书
2014/03/27 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
教师师德考核自我评价
2014/09/13 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js