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四舍五入函数代码分享(保留后几位)
Dec 10 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
JS中判断null的方法分析
Nov 21 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
vue中监听路由参数的变化及方法
Dec 06 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
cypress测试本地web应用
Jun 01 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桌面中心(三) 修改数据库
2007/03/11 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
JavaScript实现SHA-1加密算法的方法
2015/03/11 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
ajax级联菜单实现方法实例分析
2016/11/28 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
2017/12/07 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
JavaScript创建表格的方法
2020/04/13 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
2020/09/16 Javascript
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
最新个人职业生涯规划书
2014/01/22 职场文书
竞聘书格式及范文
2014/03/31 职场文书
销售个人求职信范文
2014/04/28 职场文书
本科生自荐信
2014/06/18 职场文书
群众路线组织生活会发言材料
2014/10/17 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
Go归并排序算法的实现方法
2022/04/06 Golang