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 somethings;
}else if (event.keyCode == 39){
//do somethings;
}
});

实例研究：
比如：小说网站中常见的按左右键来实现上一篇文章和下一篇文章；按ctrl+回车实现表单提交；google reader和有道阅读中的全快捷键操作...（以此提高用户体验）
如果我们要实现ctrl+Enter就是ctrl+回车提交表单，可以这样：


代码如下:

$(document).keypress(function(e) {
if (e.ctrlKey && e.which == 13)
$("form").submit();
})
//键盘操作
$(document).keydown(function(event){
var e = event || window.event;
var k = e.keyCode || e.which;
switch(k) {
case 37:
//…
break;
case 39:
//…
break;
}
return false;
})

更详尽的关于事件的总结和表述：http://www.jb51.net/article/28772.htm

w3school上的jQuery 事件参考手册

学习过程中，应该多思考怎样改善交互性和用户体验。

赞 (0)

相关推荐

  • jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)

    键盘事件处理所有用户在键盘敲击的情况,不管在文本输入区域内部还是外部.键盘事件在不同的浏览器中作用的范围是不一样的,通常这种键盘事件可以作用于 Form元素,a标签元素,window ,document这样的元素上.在所有可以获得交点的元素上是可以触发键盘事件的,可以获得焦点的元素可以这样理解,在使用Tab键的时候可以跳跃到的元素就是可以使用键盘事件的元(在没有为这些元素设置tabindex属性值的情况下,当tabindex设置为负数的时候,在使用Tab键的时候就不会获得焦点). 键盘事件可以传

  • jquery键盘事件介绍

    一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键 二.获得键盘上对应的ascII码: $(document).keydown(function(event){ alert(event.keyCode); }); $tips: 上面例子中,event.keyCode就可以帮助我

  • jquery 键盘事件的使用方法详解

    jquery 键盘事件的使用方法详解 jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: jquery 代码: 1.  keydown(); 2.  keyup();  3.  keypress(); keydown() keydown事件会在键盘按下时触发,可以在绑定的函数中欧能够返回false来防止触发浏览器的默认事件. keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件. keypress() keypress事件会在敲击按键时触发,我们可以理解为按

  • jquery中键盘事件小结

    一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键 二.获得键盘上对应的ascII码: $(document).keydown(function(event){ alert(event.keyCode); }); $tips: 上面例子中,event.keyCode就可以帮助我

  • jquery keypress,keyup,onpropertychange键盘事件

    起初用js 的onkeyup事件,但始终没能触发.该事件不知道别的什么地方监视了,js的事件有传递,也可以阻断,蛮麻烦,情况太多.找了好久,终于找到了一种解决方案,通过onpropertychange事件可以迎刃而解. 复制代码 代码如下: $("#textboxID").bind("onpropertychange", function(){ //alert( $(this).text() ); //自动截取的逻辑代码 }); firefox没有onpropert

  • jquery HotKeys轻松搞定键盘事件代码

    使用方法: 复制代码 代码如下: $.hotkeys.add('键名', function(){ 要实现的目的}); //键名可以是单键,也可以是组合键例如:ctrl+c就表示同时按下ctrl和c. 取消某个键的事件: 复制代码 代码如下: $.hotkeys.remove('键名'); 具体演示效果请转到我专门翻译的一个页面,你可以自己测试特殊键和组合键:http://img.jb51.net/online/jquery_HotKeys.html 下载插件地址::http://code.goo

  • jquery键盘事件使用介绍

    一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键 二.获得键盘上对应的ascII码: 复制代码 代码如下: $(document).keydown(function(event){ console.log(event.keyCode); }); $tips: 上面例子中,ev

  • jquery 键盘事件 keypress() keydown() keyup()用法总结

    事件的定义 完整的 key press 过程分为两个部分:1. 按键被按下:2. 按键被松开. 当按钮被按下时,发生 keydown 事件. keydown() 方法触发 keydown 事件,或规定当发生 keydown 事件时运行的函数. 当按钮被松开时,发生 keyup 事件.它发生在当前获得焦点的元素上. keyup() 方法触发 keyup 事件,或规定当发生 keyup 事件时运行的函数. keypress 事件与 keydown 事件类似.当按钮被按下时,会发生该事件.它发生在当前

  • 扩展jQuery 键盘事件的几个基本方法

    文件名:jquery.hy.key.js 复制代码 代码如下: /* ================================================================================ Desc: 扩展对键盘事件的方法 Called by: Auth: 大气象 Date: 2009-10-30 ===============================================================================

  • jquery 回车事件实现代码

    jquery 回车事件实现代码

    例子,jquery键盘事件.回车键事件用法. // 键盘事件 1.keydown()  keydown事件会在键盘按下时触发. 2.keyup()  keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress()  keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键 复制代码 代码如下: // 回车键事件 // 绑定键盘按下事件     $(document).keypress(function(e) {      // 回车键事件       

  • Python爬虫之Selenium实现键盘事件

    一.常用按键 按键 说明 Keys.BACK_SPACE 回退键(BackSpace) Keys.TAB 制表键(Tab) Keys.ENTER 回车键(Enter) Keys.SHIFT 大小写转换键(Shift) Keys.CONTROL Control键(Ctrl) Keys.ALT ALT键(Alt) Keys.ESCAPE 返回键(Esc) Keys.SPACE 空格键(Space) Keys.PAGE_UP 翻页键上(Page Up) Keys.PAGE_DOWN 翻页键下(Page

  • 基于 jQuery 实现键盘事件监听控件

    最近项目里要做一个画板,需要对键盘事件进行监听,来进行诸如撤回.重做.移动.缩放等操作,因此顺手实现了一个键盘事件监听控件,期间略有收获,整理出来,希望对大家有所帮助,更希望能获得高手的指点. 1. 自动获取焦点 似乎浏览器的键盘事件只能被那些可以获得焦点的元素设置监听,而通常需要监听事件的 <DIV>.<CANVAS> 元素都不能获得焦点,因此需要修改目标元素的某些属性使其可以获得焦点,另外一种可行的方法是将事件委托给诸如 <INPUT> 标签.这里采用的是第一类方法

  • jQuery简单获取键盘事件的方法

    本文实例讲述了jQuery简单获取键盘事件的方法.分享给大家供大家参考,具体如下: 一.我们什么时候要用到获取键盘事件 做web的时候,为了更人性的设计,我们有的时候会用到键盘事件.例如:输入框下拉提示框,通过键盘的上下键盘来选择自己想要的内容,google的输入框的下拉提示.当我们浏览相册的时候,我们可以能过键盘的左右键,来查看相片.当我们浏览长篇小说,用鼠标滚动很容易不知道看到哪一个行了,可以通键盘上下键来进行翻页,这些小细节也是非常重要的.做网站很大程度在于细节的处理. 二.jquery的

随机推荐