`

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

    博客分类:
  • js
阅读更多

本文章总结了下些关于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 键盘事件 keypress() keydown() keyup()用法总结

    本文主要总结了jQuery框架中的三种键盘事件:keypress()、keydown()、keyup()。这些事件在处理用户与网页元素交互时非常关键,尤其是在文本输入和键盘操作方面。在深入了解这些事件的用法之前,我们首先需要明白它们...

    jquery 监听 键盘 事件

    例如,要监听页面上所有元素的键盘按键事件,可以这样写: ```javascript $(document).on('keydown', function(event) { console.log('Keycode:', event.keyCode); }); ``` 在这个例子中,`event.keyCode`返回的...

    jQuery键盘按钮响应事件代码.zip

    JavaScript提供了`keydown`、`keyup`和`keypress`这三个键盘事件。在jQuery中,我们可以用相同的方式来绑定这些事件: ```javascript $(document).on("keydown", function(event) { // 在这里编写键盘按键被按下时...

    jQuery键盘按键按钮响应事件代码.zip

    本资源"jQuery键盘按键按钮响应事件代码.zip"正是一个关于如何利用jQuery来监听并处理键盘按键事件的示例代码。它允许用户在不直接点击按钮的情况下,通过键盘输入触发与按钮点击相同的行为,提升了用户体验。 首先...

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

    keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件.  keypress() keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键.  键盘事件可以传递一个参数event,其实说有的jQ

    jquery keypress,keyup,onpropertychange键盘事件

    在给定的标题和描述中,提到了`keypress`、`keyup`以及`onpropertychange`这三种键盘事件,接下来将详细介绍它们以及如何在jQuery中使用。 1. **`keypress`事件**: `keypress`事件在用户按下键盘上的一个键并产生...

    使用JS监听键盘按下事件(keydown event)

    其中,keydown事件在用户按下键盘上的任意键时触发,keypress事件在按键被按下并产生字符时触发,keyup事件则在键盘键被释放时触发。本文主要关注keydown事件的监听。 要监听全局的键盘按下事件,可以使用jQuery中...

    深入理解JQuery keyUp和keyDown的区别

    `keyup`和`keydown`是两种常见的键盘事件,它们都与用户的按键操作紧密相关,但触发的时机有所不同。本文将深入探讨这两者的差异以及它们在实际应用中的作用。 `keydown`事件在用户按下键盘上的任意键时触发,它...

    jQuery键盘按键按钮响应事件代码

    `keydown`事件在按键被按下时触发,`keyup`则在按键释放时触发,而`keypress`通常用于处理字符输入,尤其是文本输入。例如,我们可以监听`keydown`事件: ```javascript $(document).keydown(function(event) { //...

    jquery.hotkeys键盘事件处理插件DEMo

    jQuery.hotkeys支持多种键盘事件,包括`keydown`、`keyup`和`keypress`。同时,它能够识别大部分键盘上的键,如字母、数字、特殊键(如Ctrl、Shift、Alt)以及功能键(如F1-F12)。你可以自由组合这些键,创建个性化...

    jquery键盘事件介绍

    2、keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3、keypress() keypress事件会在敲击按键时触发,我们可以理解为按下并抬起同一个按键 二、获得键盘上对应的ascII码: $(document).keydown...

    jquery效果事件

    3. 键盘事件:如`keydown`、`keyup`和`keypress`,用于监听键盘输入。 4. 表单事件:如`submit`(表单提交)、`change`(元素值改变)和`focus`/`blur`(元素获取或失去焦点)等。 5. 自定义事件:除了浏览器内置...

    js及jquery组合键事件源码

    `keydown`事件在用户按下键盘上的键时触发,`keyup`事件在用户释放键时触发,而`keypress`则通常用于处理字符输入。 对于组合键的检测,我们需要同时监听多个键的状态。一个常见的做法是维护一个状态对象,记录每个...

    jQuery键盘按键监听提示代码.zip

    jQuery提供了丰富的事件处理函数,如`keydown()`, `keyup()`, `keypress()`,用于监听键盘事件。然而,这些原生的键盘事件处理通常只能监听单个按键,而不能处理复杂的复合键组合。 这就是jquery.hotkeys插件的...

    jquery.hotkeys插件键盘按键监听事件代码.zip

    2. 使用`.bind()`或`.on()`方法,结合特定的键盘事件(如`keyup`、`keydown`、`keypress`)和按键组合(如`'ctrl+a'`、`'shift+tab'`等),为DOM元素绑定事件监听器。 3. 在事件处理函数中编写相应的业务逻辑,处理...

    jquery表单事件

    3. 键盘事件处理:`keydown`、`keyup`和`keypress`可用于创建自定义的键盘交互。 ```javascript $('input').keydown(function(event) { if (event.keyCode === 13) { // 回车键 alert('你按下了回车键!'); } });...

Global site tag (gtag.js) - Google Analytics