当前位置:首页 > 开发 > Web前端 > Jquery > 正文

jQuery 键盘事件keydown ,keypress ,keyup介绍

发表于: 2015-05-26   作者:107x   来源:转载   浏览:
摘要: 本文章总结了下些关于jQuery 键盘事件keydown ,keypress ,keyup介绍,有需要了解的朋友可参考。 一、首先需要知道的是: 1、keydown() keydown事件会在键盘按下时触发. 2、keyup()  代码如下 复制代码 $('input').keyup(funciton(){      

本文章总结了下些关于jQuery 键盘事件keydown ,keypress ,keyup介绍,有需要了解的朋友可参考。

一、首先需要知道的是:
1、keydown()
keydown事件会在键盘按下时触发.
2、keyup()

 代码如下 复制代码

$('input').keyup(funciton(){
          alert('keyup function is running!!');
        });

keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件

3、keypress()

keypress()事件和keydown是差不多的,只有一个例外,如果需要阻止按键的默认行为,你必须是哟就keypress事件

例1

 代码如下 复制代码

$(selector).keydown(function(event){
 var key_code = event.keyCode;
 if (key_code==13)
 {
  xxxxxx();
 }
});

event.keyCode能够得到当前按键的代码,用到下面即可。

实例

 代码如下 复制代码

$(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;
}
});

注意

在jQuery中keydown,keypress,keyup事件是按一定的顺序执行的。
     

 代码如下 复制代码
   $('input').keyup(function(){
          console.log('keyup');
           });
        $('input').keydown(function(){
          console.log('keydown');
           });
        $('input').keypress(function(){
          console.log('keypress');
           });

执行结果是:keydown ,keypress ,keyup .

 

From: http://www.111cn.net/wy/jquery/45752.htm

jQuery 键盘事件keydown ,keypress ,keyup介绍

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
最近專案中引用了Telerik ASP.NET擴充元件AutoComplete輸入欄位,測試時發現偶爾會不聽始喚,輸入文
1. 首先将窗口属性KeyPreview设为true,如果属性对话框中找不到,就直接在代码里添加; 2. 添加KeyP
jquery.hotkeys文件下载: http://download.csdn.net/detail/pukuimin1226/4389643 参照了一下它的
小盆友们, 人生在世,做事情要谨慎,要关注细节,细节往往对于我们的成败有着至关重要的决定作用,
用extjs做项目大部分都会用到一个组件combobox去实现联想框的功能,如果实现这个功能肯定是要用到事
通常在web应用或者网站中,我们使用鼠标来控制元素或者执行导航,相对于桌面应用来说,使用web应用
通常在web应用或者网站中,我们使用鼠标来控制元素或者执行导航,相对于桌面应用来说,使用web应用
通常在web应用或者网站中,我们使用鼠标来控制元素或者执行导航,相对于桌面应用来说,使用web应用
通常在web应用或者网站中,我们使用鼠标来控制元素或者执行导航,相对于桌面应用来说,使用web应用
通常在web应用或者网站中,我们使用鼠标来控制元素或者执行导航,相对于桌面应用来说,使用web应用
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号