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 继承实现例子
Aug 12 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
vue综合组件间的通信详解
Nov 06 Javascript
Vue自定义toast组件的实例代码
Aug 15 Javascript
关于AngularJS中ng-repeat不更新视图的解决方法
Sep 30 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
Apr 22 Javascript
vue  elementUI 表单嵌套验证的实例代码
Nov 06 Javascript
vue实现在线学生录入系统
May 30 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
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
javascript拓展DOM操作 prependChild insertAfert
2010/11/17 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
2013/10/11 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
基于webpack 实用配置方法总结
2017/09/28 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
nestjs返回给前端数据格式的封装实现
2021/02/22 Javascript
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python之PyMongo使用总结
2017/05/26 Python
Python模块结构与布局操作方法实例分析
2017/07/24 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
Python实现我的世界小游戏源代码
2021/03/02 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
什么是Smart Navigation?
2016/07/03 面试题
nohup的用法
2012/11/26 面试题
党支部承诺书范文
2014/03/28 职场文书
低碳环保演讲稿
2014/08/28 职场文书
教导主任个人总结
2015/03/03 职场文书
用 Python 元类的特性实现 ORM 框架
2021/05/19 Python
Python序列化与反序列化相关知识总结
2021/06/08 Python
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技