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的划词搜索实现(备忘)
Sep 14 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
JS 添加千分位与去掉千分位的示例
Jul 11 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
微信小程序 视图容器组件的详解及实例代码
Jan 19 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
Javascript三种字符串连接方式及性能比较
May 28 Javascript
使用javascript解析二维码的三种方式
Nov 11 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中用数组的方法设置cookies
2011/04/21 PHP
代码生成器 document.write()
2007/04/15 Javascript
javascript 原型继承介绍
2011/08/30 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
javascript 另一种图片滚动切换效果思路
2012/04/20 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
JS中事件冒泡和事件捕获介绍
2016/12/13 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
Python Pandas数据结构简单介绍
2019/07/03 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
Django Rest framework频率原理与限制
2019/07/26 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
使用分层画布来优化HTML5渲染的教程
2015/05/08 HTML / CSS
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
眼镜促销方案
2014/03/15 职场文书
环保专项行动方案
2014/05/12 职场文书
售后客服工作职责
2014/06/16 职场文书
龙潭大峡谷导游词
2015/02/10 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
中学图书馆工作总结
2015/08/11 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书