jQuery 键盘事件之 keydown()和keyup()事件

keydown()事件

定义和用法

完整的 key press 过程分为两个部分:1. 按键被按下;2. 按键被松开。

当按钮被按下时,发生 keydown 事件。

keydown() 方法触发 keydown 事件,或规定当发生 keydown 事件时运行的函数。

注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。

语法

$("").keydown()

下面我们来写一个keydown事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>submit</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>    
    <p>php 中文网</p>

    <script>
        $('body').keydown(function(){
            $('p').html('php.cn');
        })
    </script>
</body>
</html>

当按下键盘时,“php 中文网”会被替换成“php.cn”

keyup 事件

定义和用法

完整的 key press 过程分为两个部分,按键被按下,然后按键被松开并复位。

当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。

keyup() 方法触发 keyup 事件,或规定当发生 keyup 事件时运行的函数。

注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>    
    <p>php 中文网</p>

    <script>
        $('body').keyup(function(){
            $('p').html('php.cn');
        })
    </script>
</body>
</html>

看如上实例,大家可以在本地调试,当按下键盘并没有松开键盘,文本不会发生改变,当键盘松开时,文本发生变化

继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>submit</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <p>php 中文网</p> <script> $('body').keydown(function(){ $('p').html('php.cn'); }) </script> </body> </html>
提交重置代码