深入理解JQuery keyUp和keyDown的區(qū)別

更新時(shí)間：2013年12月12日 09:19:23 作者：

這篇文章主要是對JQuery中keyUp與keyDown的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對大家有所幫助

定義和用法
完整的 key press 過程分為兩個(gè)部分：1. 按鍵被按下；2. 按鍵被松開。

當(dāng)按鈕被按下時(shí)，發(fā)生 keydown 事件。

keydown() 方法觸發(fā) keydown 事件，或規(guī)定當(dāng)發(fā)生 keydown 事件時(shí)運(yùn)行的函數(shù)。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").keydown(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").keyup(function(){
    $("input").css("background-color","#D6D6FF");
  });
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>當(dāng)發(fā)生 keydown 和 keyup 事件時(shí)，輸入域會改變顏色。請?jiān)囍谄渲休斎雰?nèi)容。</p>
</body>
</html>

眾所周知，jquery封裝了很多事件交互方法，這里講到的問題在原生js中也是有的。

keyup是在用戶將按鍵抬起的時(shí)候才會觸發(fā)的，屬于整個(gè)按鍵過程中的最后階段，所以有其特定的用處，就是在左側(cè)輸入，右側(cè)同步顯示的過程中很有用處。典型的例子就是郵件編輯預(yù)覽的應(yīng)用。

復(fù)制代碼代碼如下:

    <script type="text/javascript">
        $(function() {
            $('#t1').live('keyup', function() {
                $('#v1').text($(this).val());
            });
            $('#t2').live('keydown', function() {
                $('#v2').text($(this).val());
            });
            $('#t3').live('keypress', function() {
                $('#v3').text($(this).val());
            });
        });    
    </script>

</head>
<body>
    <textarea id="t1"></textarea>
    <div id="v1">
    </div>
    <textarea id="t2"></textarea>
    <div id="v2">
    </div>
    <textarea id="t3"></textarea>
    <div id="v3">
    </div>
</body>
</html>

這里分別應(yīng)用了三種事件，其中t1能夠完整的同步到v1中，而keypress和keydown總是少最后一個(gè)字符，這樣就說明了這三種事件觸發(fā)的小小區(qū)別，keydown是在按下時(shí)觸發(fā)，不能得到最后的輸入結(jié)果，keypress也是一樣。

例如：keydown綁定文本框，每次點(diǎn)擊觸發(fā)事件，在獲取文本框的值，總是打印上次操作時(shí)文本框的內(nèi)容，

這是因?yàn)閗eydown操作后，事件觸發(fā)了，但值還未顯示在文本框中，所以這類操作要用keyup 一個(gè)完整的按鍵動作后，才可以獲取文本框的值。

keydown與keypress更適用于通過鍵盤控制頁面類功能的實(shí)現(xiàn)。

獲取鍵盤點(diǎn)擊的鍵位：

復(fù)制代碼代碼如下:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(event){
$("div").html("Key: " + event.which);
});
});
</script>
</head>
<body>

請隨意鍵入一些字符：<input type="text" />
<p>當(dāng)您在上面的框中鍵入文本時(shí)，下面的 div 會顯示鍵位序號。</p>
<div />
</body>
</html>

您可能感興趣的文章: