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中void(0)的具体含义解释
Aug 02 Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
一次失败的jQuery优化尝试小结
Feb 06 Javascript
在vs2010中调试javascript代码方法
Feb 11 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
JavaScript实现的in_array函数
Aug 27 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
js带点自动图片轮播幻灯片特效代码分享
Sep 07 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
JavaScript实现筛选数组
Mar 02 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/03 冲泡冲煮
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
jQuery 使用手册(七)
2009/09/23 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
JavaScript生成的动态下雨背景效果实现方法
2015/02/25 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
vue-cli的工程模板与构建工具详解
2018/09/27 Javascript
详解微信小程序中组件通讯
2018/10/30 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
浅谈Python 对象内存占用
2016/07/15 Python
Python实现SQL注入检测插件实例代码
2019/02/02 Python
Python数据类型之Number数字操作实例详解
2019/05/08 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
python识别文字(基于tesseract)代码实例
2019/08/24 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
浅谈HTML5新增及移除的元素
2016/06/27 HTML / CSS
幼儿园感恩节活动方案2014
2014/10/11 职场文书
干部考察材料范文
2014/12/24 职场文书
公司董事任命书
2015/09/21 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python