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官方 jQuery1.1.3发布,速度提升800%,体积保持20K
Aug 19 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
有关于JS辅助函数inherit()的问题
Apr 07 Javascript
jQuery获取浏览器中的分辨率实现代码
Apr 23 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
JavaScript数组操作函数汇总
Aug 05 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
基于VSCode调试网页JavaScript代码过程详解
Jul 20 Javascript
JavaScript 中的六种循环方法
Jan 06 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
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
2018/07/10 Javascript
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
2018/11/16 Javascript
Vue 自定义指令功能完整实例
2019/09/17 Javascript
js实现列表按字母排序
2020/08/11 Javascript
[02:28]DOTA2亚洲邀请赛附加赛 RECAP赛事回顾
2015/01/29 DOTA
Python深入学习之闭包
2014/08/31 Python
python制作最美应用的爬虫
2015/10/28 Python
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
Django实现跨域的2种方法
2019/07/31 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
经典的毕业生自荐信范文
2014/04/14 职场文书
答谢会策划方案
2014/05/12 职场文书
找工作求职信
2014/07/07 职场文书
领导班子整改方案
2014/10/25 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
员工离职通知函
2015/04/25 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书