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 24 Javascript
JavaScript 设计模式学习 Singleton
Jul 27 Javascript
JavaScript常用对象的方法和属性小结
Jan 24 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
js canvas实现擦除效果示例代码
Apr 26 Javascript
vue-axios使用详解
May 10 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
Jul 26 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/03/04 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
Angular4学习笔记之实现绑定和分包
2017/08/01 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
vue resource发送请求的几种方式
2019/09/30 Javascript
python将字符串转换成数组的方法
2015/04/29 Python
python协程用法实例分析
2015/06/04 Python
Python解析树及树的遍历
2016/02/03 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
python 读取文件并把矩阵转成numpy的两种方法
2019/02/12 Python
详解Python字典的操作
2019/03/04 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
tensorflow中tf.reduce_mean函数的使用
2020/04/19 Python
python 实现图片修复(可用于去水印)
2020/11/19 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
医院总经理职责
2013/12/26 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
2015年小学体育教师工作总结
2015/10/23 职场文书