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 ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
老生常谈遮罩层 滚动条的问题
Apr 29 Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
Javascript 之封装(Package)
Sep 14 Javascript
js判断在哪个浏览器打开项目的方法
Jan 21 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
原生js实现自定义滚动条组件
Jan 20 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中header和session_start前不能有输出原因分析
2013/01/11 PHP
php实现的漂亮分页方法
2014/04/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
javascript 动态加载 css 方法总结
2009/07/11 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
2016/12/03 Javascript
jQuery实现页面顶部下拉广告
2016/12/30 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
Python机器学习之决策树算法
2017/12/22 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
PyQt打开保存对话框的方法和使用详解
2019/02/27 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
python twilio模块实现发送手机短信功能
2019/08/02 Python
详解Python文件修改的两种方式
2019/08/22 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
临床医学专业毕业生的自我评价
2013/10/17 职场文书
售后服务承诺书
2014/03/26 职场文书
唐山大地震的观后感
2015/06/05 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
四年级数学教学反思
2016/02/16 职场文书
2019求职信大礼包
2019/05/15 职场文书
Python合并多张图片成PDF
2021/06/09 Python
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis