深入了解jquery中的键盘事件
很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的。
一、首先需要知道的是:
1、keydown()
keydown事件会在键盘按下时触发.
2、keyup()
keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件
3、keypress()
keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键
二、获得键盘上对应的ascII码:
$(document).keydown(function(event){
console.log(event.keyCode);
});
$tips: 上面例子中,event.keyCode就可以帮助我们获取到我们按下了键盘上的什么按键,他返回的是ascII码,比如说上下左右键,分别是38,40,37,39;
三、实例(当按下键盘上的左右方面键时)
$(document).keydown(function(event){ //判断当event.keyCode 为37时(即左方面键),执行函数to_left(); //判断当event.keyCode 为39时(即右方面键),执行函数to_right(); if(event.keyCode == 37){ //do something;
}else if (event.keyCode == 39){
//do something;
}
});
实例研究:
比如:小说网站中常见的按左右键来实现上一篇文章和下一篇文章;按ctrl+回车实现表单提交;google reader和有道阅读中的全快捷键操作...(以此提高用户体验)
① 实现ctrl+Enter就是ctrl+回车提交表单:
$(document).keypress(function(event) { if (event.ctrlKey && event.which == 13) $("form:first").trigger("submit"); })
② 监测ctrl按键:
$(document).keydown(function(event){ //(ctrlKey和metaKey等效:都是监测)按下ctrl返回turn,按下非ctrl键返回false; console.log(event.ctrlKey); //console.log(event.metaKey); })
③ 键盘系列操作
$(document).keydown(function(event){ var e = event || window.event; //作用??? var k = e.keyCode || e.which; //获取按键的acdII 码 switch(k) { case 37: //… break; case 39: //… break; } return false; })
//另外发现一个应用的方法:当页面转载完成的时候,第一个表单元素获得焦点,以便输入 $("input[type=text]:first").trigger("focus"); //当表单没获得焦点,但用户却按下键盘的时候,自动为用户定位焦点到输入框上 $(document).keydown(function(){ $("input[type=text]:first").trigger("focus"); })
以上是列出了jquery键盘事件的常用方法,很多时候应该也够用了。
深入了解jquery中的键盘事件的更多相关文章
- JQuery中如何处理键盘事件
背景:比如在页面中,敲击回车键以后,实现登录功能,在之前的Winform开发时,也遇到过处理键盘事件的功能,比如游戏软件中,上下左右的移动等. 代码如下: $(document).keydown(fu ...
- IOS中input键盘事件支持的解决方法
欢迎大家去我的网站详细查看http://genghongshuo.com.cn/ IOS中input键盘事件keyup.keydown.等支持不是很好, 用input监听键盘keyup事件,在安卓手机 ...
- js便签笔记(6)——jQuery中的ready()事件为何需要那么多代码?
前言: ready()事件的应用,是大家再熟悉不过的了,学jQuery的第一步,最最常见的代码: jQuery(document).ready(function () { }); jQuery(fun ...
- jquery-10 jquery中的绑定事件和解绑事件的方法是什么
jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...
- jquery 组合键键盘事件
jQuery处理键盘事件,比如小说网站中常见的按左右键来实现上一篇文章和下一篇文章,按ctrl+回车实现表单提交,google reader和有道阅读中的全快捷键操作... 本文讲述jQuery处理按 ...
- jquery中的DOM事件绑定与解绑
在jquery事件中有时候有的事件只需要在绑定后有效触发一次,当通过e.target判断触发条件有效触发后解除绑定事件,来避免多次无效触发和与未知情况造成冲突. 这时候就要用到了jquery中的事件绑 ...
- Qt中的键盘事件,以及焦点的设置(比较详细)
Qt键盘事件属于Qt事件系统,所以事件系统中所有规则对按键事件都有效.下面关注点在按键特有的部分: focus 一个拥有焦点(focus)的QWidget才可以接受键盘事件.有输入焦点的窗口是活动窗口 ...
- jquery中绑定click事件重复执行问题
jquery中单击事件重复多次执行的问题使用如下方式: $('#sub').unbind('click').click(function () { ... });
- jQuery中四种事件监听的区别
原文链接:点我 我们知道jquery提供了四种事件监听方式,分别是bind.live.delegate.on,下面就分别对这四种事件监听方式分析. 已知有4个列表元素: 列表元素1 列表元素2 列表元 ...
随机推荐
- 打印从1到k之间的所有素数
问题分析:素数是指大于1且只能被它本身和1整除的数,根据定义可以从2开始对一个数取余数一直到它本身,若它有第三个整除数,则可以判定它不是素数.若使用这种方法,会浪费时间,我们可以判断2到这个数的算术平 ...
- linux系统垃圾清理
早上刚来,服务器出502错误了.我登上linux服务器,发现敲一个命令都提示没空间了, 用 df -h 查看了下 发现系统盘目录空间大小占用达到90%多,我觉得有些诧异, 难道是产生系统垃圾 然后用 ...
- JSP和servlet结合案例
[使用JSP技术实现猜数字游戏] 设计一个web app,有一个随机数字,给5次机会让客户猜测这个数字: 1)如果客户猜的数字比产生的数字值大,则提示"可惜,大了点". 2)如果客 ...
- Publisher/Subscriber(发布/订阅者)消息模式开发流程
该模式的作用是发布者和订阅者 可以相互发送消息 发布者和订阅者都充当 生产者和消费者 发布者 package publisher.to.subscriber; import java.awt.font ...
- 8 Pratical Examples of Linux “Touch” Command--reference
In Linux every single file is associated with timestamps, and every file stores the information of l ...
- MySQL强化
大纲: 数据约束 数据库设计(表设计) 关联查询(多表查询) 存储过程 触发器 mysql权限问题 1 数据约束 1.1 什么是数据约束 对用户操作表的数据进行约束. 1.2 约束种类 1.2.1 默 ...
- 为什么java不支持多重继承?
什么是钻石问题?如下图所示,B和C继承于A,D继承B和C(多重继承),在D中调用A的方法时,无法判断是调用B中的实现还是C的实现,下图继承关系是个菱形,所以该问题又叫做菱形问题. 如果java要解决这 ...
- Java基础知识强化之集合框架笔记48:产生10个1~20之间的随机数(要求:随机数不能重复) 简洁版
1. 编写一个程序,获取10个1至20的随机数,要求随机数不能重复. 分析: A: 创建随机数对象 B: 创建一个HashSet集合 C: 判断集合的长度是不是小于10 是:就创建一个随机 ...
- python下操作ftp上传
生产情况:tomcat下业务log备份,目录分多级,然后对应目录格式放到ftp上:所以,结构上 我就是一级一级目录进行判断(因为我没有找到在ftp一次判断其子目录是否存在),还有一个low点就是我没有 ...
- order by跟group by 跟having----------------sum() 求和 avg()求平均 count() 求个数--------------like
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoEAAACdCAIAAABEujUmAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWX ...