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 面向对象 继承
May 13 Javascript
js 立即调用的函数表达式如何写
Jan 12 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
bootstrap按钮插件(Button)使用方法解析
Jan 13 Javascript
vue-router路由简单案例介绍
Feb 21 Javascript
Bootstrap表格制作代码
Mar 17 Javascript
Javascript实现信息滚动效果
May 18 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 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
PHP实现变色验证码实例
2014/01/06 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
Javascript Select操作大集合
2009/05/26 Javascript
Jquery 点击按钮显示和隐藏层的代码
2011/07/25 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
JavaScript中的事件与异常捕获详析
2019/02/24 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
解读! Python在人工智能中的作用
2017/11/14 Python
详解python while 函数及while和for的区别
2018/09/07 Python
Python除法之传统除法、Floor除法及真除法实例详解
2019/05/23 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
一道Delphi面试题
2016/10/28 面试题
电信营业员自我评价分享
2014/01/17 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
遗嘱继承公证书
2014/04/09 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
学生保证书格式
2015/02/27 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
公司老总年会致辞
2015/07/30 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
python字符串常规操作大全
2021/05/02 Python
JavaScript实现简单计时器
2021/06/22 Javascript
Elasticsearch 数据类型及管理
2022/04/19 Python
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers