jQuery 鍵盤事件之 ke...LOGIN

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>
章節課件