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 相关文章推荐
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
jquery实现select选择框内容左右移动代码分享
Nov 21 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
Dec 12 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
纯javascript版日历控件
Nov 24 Javascript
详谈js中window.location.search的用法和作用
Feb 13 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
基于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
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
JavaScript错误处理
2015/02/03 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
2017/11/17 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
JS实现手风琴特效
2020/11/08 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
python 如何设置守护进程
2020/10/29 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
如何利用python 读取配置文件
2021/01/06 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
毕业生自荐信
2013/12/14 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
奥巴马当选演讲稿
2014/09/10 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
golang操作rocketmq的示例代码
2022/04/06 Golang
Go语言 详解net的tcp服务
2022/04/14 Golang
react中useState使用:如何实现在当前表格直接更改数据
2022/08/05 Javascript