很多时候,我们需要获取用户的键盘事件,下面就一起来看看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中的键盘事件的更多相关文章

  1. JQuery中如何处理键盘事件

    背景:比如在页面中,敲击回车键以后,实现登录功能,在之前的Winform开发时,也遇到过处理键盘事件的功能,比如游戏软件中,上下左右的移动等. 代码如下: $(document).keydown(fu ...

  2. IOS中input键盘事件支持的解决方法

    欢迎大家去我的网站详细查看http://genghongshuo.com.cn/ IOS中input键盘事件keyup.keydown.等支持不是很好, 用input监听键盘keyup事件,在安卓手机 ...

  3. js便签笔记(6)——jQuery中的ready()事件为何需要那么多代码?

    前言: ready()事件的应用,是大家再熟悉不过的了,学jQuery的第一步,最最常见的代码: jQuery(document).ready(function () { }); jQuery(fun ...

  4. jquery-10 jquery中的绑定事件和解绑事件的方法是什么

    jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...

  5. jquery 组合键键盘事件

    jQuery处理键盘事件,比如小说网站中常见的按左右键来实现上一篇文章和下一篇文章,按ctrl+回车实现表单提交,google reader和有道阅读中的全快捷键操作... 本文讲述jQuery处理按 ...

  6. jquery中的DOM事件绑定与解绑

    在jquery事件中有时候有的事件只需要在绑定后有效触发一次,当通过e.target判断触发条件有效触发后解除绑定事件,来避免多次无效触发和与未知情况造成冲突. 这时候就要用到了jquery中的事件绑 ...

  7. Qt中的键盘事件,以及焦点的设置(比较详细)

    Qt键盘事件属于Qt事件系统,所以事件系统中所有规则对按键事件都有效.下面关注点在按键特有的部分: focus 一个拥有焦点(focus)的QWidget才可以接受键盘事件.有输入焦点的窗口是活动窗口 ...

  8. jquery中绑定click事件重复执行问题

    jquery中单击事件重复多次执行的问题使用如下方式: $('#sub').unbind('click').click(function () { ... });

  9. jQuery中四种事件监听的区别

    原文链接:点我 我们知道jquery提供了四种事件监听方式,分别是bind.live.delegate.on,下面就分别对这四种事件监听方式分析. 已知有4个列表元素: 列表元素1 列表元素2 列表元 ...

随机推荐

  1. 问题-[Delphi]断点后怎么设置条件

    1.设置一个断点(这时某行代码有个红点).2.在红点上右击->"Breakpoint properties..."->"Condition:"-&g ...

  2. python 基础干货 01

    赋值的实现 a = 'abc' 1. 在内存中创建了'abc'字符串; 2. 在内存中创建了一个名为 a 的变量, 并把它指向刚才创建的'abc', 也就是a中保存着字符串的地址. b = a, 创建 ...

  3. bash手册 之重定向原理与实现

    http://www.gnu.org/software/bash/manual/bashref.html#Redirections http://www.cnblogs.com/weidagang20 ...

  4. servlet和手动创建servlet,断点调试

    1.    什么是Servlet Servlet是一种用Java语言编写的Web应用组件 Servlet主要用于动态网页输出,扩展了Web服务器的功能 Servlet由Servlet容器进行管理 2. ...

  5. LabView 快捷键

    对象调整和移动Shift-click 选择多个对象,在现有选择的基础上添加对象(方向键) 以一个像素为单位移动所选对象Shift- 以几个像素为单位移动所选对象Shift-click (拖动对象) 在 ...

  6. 借用网上大神的一些知识,html5 video 视频播放都兼容(Android,iOS,电脑)

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

  7. PHP之APC缓存详细介绍

    1.APC缓存简介 APC,全称是Alternative PHP Cache,官方翻译叫"可选PHP缓存".它为我们提供了缓存和优化PHP的中间代码的框架. APC的缓存分两部分: ...

  8. (转)Spring读书笔记-----Spring的Bean之Bean的基本概念

    从前面我们知道Spring其实就是一个大型的工厂,而Spring容器中的Bean就是该工厂的产品.对于Spring容器能够生产那些产品,则取决于配置文件中配置. 对于我们而言,我们使用Spring框架 ...

  9. PHP 进制问题

    PHP有一些函数提供进制之间的转化问题 在Math函数中有一部分: decbin() - 十进制转换为二进制 bindec() — 二进制转换为十进制 octdec() - 八进制转换为十进制 hex ...

  10. 学习java随笔第九篇:java异常处理

    在java中的异常处理和c#中的异常处理是一样的都是用try-catch语句. 基本语法如下 try { //此处是可能出现异常的代码 } catch(Exception e) { //此处是如果发生 ...