首頁 >web前端 >js教程 >JQuery中keyUp和keyDown的差異詳解

JQuery中keyUp和keyDown的差異詳解

黄舟原創: 2017-06-27 13:39:311642瀏覽

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

定義與用法
完整的key press 流程分成兩個部分：1. 按鍵被按下；2. 按鍵被放開。

當按鈕被按下時，發生 keydown 事件。

keydown() 方法觸發 keydown 事件，或規定發生 keydown 事件時執行的函數。

程式碼如下:

<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>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>
</body>
</html>

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

keyup是在使用者將按鍵抬起的時候才會觸發的，屬於整個按鍵過程中的最後階段，所以有其特定的用處，就是在左側輸入，右側同步顯示的過程中很有用處。典型的例子就是郵件編輯預覽的應用程式。

程式碼如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>

    <script src="JS/jquery-1.4.2.js" type="text/javascript"></script>

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

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

這裡分別應用了三種事件，其中t1能夠完整的同步到v1中，而keypress和keydown總是少最後一個字符，這樣就說明了這三種事件觸發的小小區別，keydown是在按下時觸發，不能得到最後的輸入結果，keypress也是一樣。

例如：keydown綁定文字框，每次點擊觸發事件，在取得文字方塊的值，總是列印上次操作時文字方塊的內容，

這是因為keydown運算之後，事件觸發了，但值還未顯示在文字方塊中，所以這類操作要用keyup 一個完整的按鍵動作後，才可以取得文字方塊的值。

keydown與keypress更適用於透過鍵盤控制頁麵類別功能的實作。

取得鍵盤點擊的鍵位元：

程式碼如下:

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

請隨意鍵入一些字元：22e1bb649e3e439c82b64204a5f95e3f
< ;p>當您在上面的方塊中鍵入文字時，下面的p 會顯示鍵位序號。 94b3e26ee717c64999d7867364b1b4a3
7493e18ec8d2afde690a0696fdaf5e59
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

以上是JQuery中keyUp和keyDown的差異詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：jQuery.keydown()函數的使用與定義詳解下一篇：jQuery.keydown()函數的使用與定義詳解

看更多