keydown,keypress,keyup三者之間的區別

時間 2020-09-20

標籤 keydown keypress keyup 之間區別简体版

原文原文鏈接

最近看了Javascript高級教程中對過濾輸入的介紹，想實現好比電話號碼中不能包好非數值的字符，而相應文本中插入字符的操做是keypress事件，因此就想經過阻止這個事件的默認事件行爲來阻止這個事件的默認行爲來屏蔽此類字符，可是屏蔽以後全部的安檢操做都會被屏蔽，文本框會變成可讀的。若是隻想屏蔽特定的字符，須要檢測keypress事件對應的字符編碼，而後決定如何響應。javascript

可是我在利用keypree事件的時候，徹底搞蒙了。由於前面看了keydown、keypress、keyup事件，它們到底怎麼用呢？

下面是Js高級教程對三者的描述：
keydown：當用戶按下鍵盤上的任意鍵時觸發，若是按住不放的話，會重複觸發此事件；
keypress：當用戶按下鍵盤上的字符鍵時觸發，若是按住不讓的話，會重複觸發此事件；
keyup：當用戶釋放鍵盤上的字符鍵時觸發。css

那麼對應的keyCode（鍵碼）和charCode（字符編碼）是什麼樣子的呢？

在發生keydown和keyup事件時，event對象的keyCode屬性會包含一個代碼，與鍵盤上的一個特定的鍵對應。對數字字母鍵，keyCode屬性的值與ASCII碼中對應小寫字母或者數字的編碼相同，
發生keypress事件意味着按下的鍵會影響到屏幕中文本的顯示。在全部的瀏覽器中，按下可以插入或者刪除字符的鍵都會觸發keypress事件。IE9，FireFox、Chrome和Safari的event對象都支持一個charCode屬性，這個屬性只有在發生keypress事件時，才包含值，並且這個值是按下的那個鍵所表明的字符的ASCII編碼。此時的keyCode一般等於0或者也可能等於所按鍵的鍵碼。

<input type="text" id="text1"/>
<script>
  var oTxt=document.getElementById("text1");
  oTxt.onkeyup=function getCharCode()
  {
    return false;
    if (typeof(event.CharCode)==="number")
    {

      alert(String.fromCharCode(event.charCode)) ;
    }
    else
    {
      alert(String.fromCharCode(event.keyCode));
    }
  };
</script>

好比上述的代碼，按下a就會顯示97,按下b會顯示98.
而alert(String.fromCharCode(event.keyCode));會將其轉換成實際的字符,好比按下a則會顯示a，按下B則會x顯示b。String.fromCharCode（）：接收一個指定的unicode的值，返回一個字符串，該方法是String的靜態方法，不能本身電定義。
而三者之間的區別以下：（這裏借鑑了一下貓在前端路上的博客，結合上面的理解，可能會好一點，後面我也會貼出他的博文）：https://www.cnblogs.com/littlelan/archive/2013/03/28/2987851.htmlhtml

按下鍵盤會觸發鍵盤事件，順序依次爲：keydown->keypress->keyup.前端

keydown、keypress、事件觸發在文字還沒敲進文本框，就像上面的keypress事件，只是按下字符鍵，顯示的結果，即獲得的是觸發鍵盤事件前的文本。而keyup是事件觸發整個鍵盤事件的操做已經完成，得到的是觸發鍵盤事件後的文本。java
keypress與keydown與keyup的主要區別：
（1）對中文輸入法不友好，沒法響應中文輸入；
（2）沒法響應系統功能鍵（好比delete，backspace）；
（3）因爲前面兩個限制，keyCode與keydown和keyup不是很一致；jquery
在keyup中沒法是沒法阻止瀏覽器的默認事件的，由於在keypress時，瀏覽器默認行爲已經完成，即將輸入文本框（儘管這時尚未顯示），這個時候不論是preventDefault仍是return false，都不能阻止在文本框中輸入文字的行爲，如要阻止在文本框中輸入文字，必須在keydown或者keypress時，即時阻止。git

出處：https://blog.csdn.net/qq_26102281/article/details/83785085chrome

===============================================================瀏覽器

按下鍵盤時會觸發鍵盤事件，順序爲keydown -> keypress ->keyup。markdown

一、keydown、keypress事件觸發在文字還沒敲進文本框，這時若是在keydown、keypress事件中輸出文本框中的文本，獲得的是觸發鍵盤事件前的文本，而keyup事件觸發時整個鍵盤事件的操做已經完成，得到的是觸發鍵盤事件後的文本

<input id="input" value="default" type="text" />
<script>
var input = document.getElementById('input');
input.onkeydown = function() {
    console.log('onkeydown ' + this.value);
}
input.onkeypress = function() {
    console.log('onkeypress ' + this.value);
}
input.onkeyup = function() {
    console.log('onkeyup ' + this.value);
}
</script>

在文本框中敲入數字1，輸出結果爲：

onkeydown default
onkeypress default
onkeyup default1

二、keypress事件與keydown和keyup的主要區別

1）對中文輸入法支持很差，沒法響應中文輸入

2）沒法響應系統功能鍵（如delete，backspace）

3）因爲前面兩個限制，keyCode與keydown和keyup不是很一直

三、在keyup事件中沒法阻止瀏覽器默認事件，由於在keypress時，瀏覽器默認行爲已經完成，即將文字輸入文本框（儘管這時還沒顯示），這個時候不論是preventDefault仍是return false，都不能阻止在文本框中輸入文字的行爲，如要阻止在文本框中輸入文字，必須在keydown或keypress時阻止

<input id="input" value="default" type="text" />
<script>
var input = document.getElementById('input');
input.onkeydown = function() {
    //return false;
    console.log('onkeydown ' + this.value);
}
input.onkeypress = function() {
    //return false;
    console.log('onkeypress ' + this.value);
}
input.onkeyup = function() {
    return false;
    console.log('onkeyup ' + this.value);
}
</script>

結果爲keydown、keypress事件中return false文本框沒法輸入文字，在keyup事件中return false文本框能夠輸入文字

四、textInput事件

文本框的鍵盤響應事件把textInpput也加進來，觸發的順序爲：keydown -> keypress ->textInput -> keyup

textInput事件是DOM3後支持的，主要用來替換keypress，與keypress的主要差異在於添加了對中文輸入法的支持，還有一點就是textInput只在可編輯文本區才能觸發（如input、textarea），而keypress是任何能得到焦點的控件的能觸發（如button），可是textInput事件的支持還不是很好，目前只有safari、chrome支持。

出處：https://www.cnblogs.com/littlelan/archive/2013/03/28/2987851.html

=================================================================

C# 如何捕獲鍵盤按鈕和組合鍵以及KeyPress/KeyDown事件之間的區別（附KeyChar/KeyCode值）

1. 首先將窗口屬性KeyPreview設爲true，若是屬性對話框中找不到，就直接在代碼裏添加；
2. 添加KeyPress / KeyDown事件：

一、KeyPress 和KeyDown 、KeyPress之間的區別
1）KeyPress主要用來捕獲數字(注意：包括Shift+數字的符號)、字母（注意：包括大小寫）、小鍵盤等除了F1-十二、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜單鍵}、{開始鍵}和方向鍵外的ANSI字符
KeyDown 和KeyUp 一般能夠捕獲鍵盤除了PrScrn全部按鍵(這裏不討論特殊鍵盤的特殊鍵）
2）KeyPress 只能捕獲單個字符
KeyDown 和 KeyUp 能夠捕獲組合鍵。
3）KeyPress 能夠捕獲單個字符的大小寫
4）KeyDown和KeyUp 對於單個字符捕獲的KeyValue 都是一個值，也就是不能判斷單個字符的大小寫。
5）KeyPress 不區分小鍵盤和主鍵盤的數字字符。
KeyDown 和KeyUp 區分小鍵盤和主鍵盤的數字字符。
6）其中PrScrn 按鍵KeyPress、KeyDown和KeyUp 都不能捕獲。

二、KeyPress事件

Winform文本框只能輸入數字和退格鍵和小數點：

private void TextBox_KeyPress(object sender, KeyPressEventArgs e)
{
    if (e.KeyChar != 8 && !Char.IsDigit(e.KeyChar) && e.KeyChar != '.')
    {
        e.Handled = true;
    }
}
//或者 
private void TextBox_KeyPress(object sender, KeyPressEventArgs e)
{
    if (e.KeyChar != '\b' && !Char.IsDigit(e.KeyChar) && e.KeyChar != '.')
    {
        e.Handled = true;
    }
}

三、KeyChar取值：

另外2個特殊ASCII碼：回車=13，換行=10，退格='\b' 或者退格=8

四、KeyDown事件：

捕獲單個按鍵：

private void Form1_KeyDown(object sender, KeyEventArgs e) 
{ 
       Keys key = e.KeyCode; 
       if (e.Control!=true)//若是沒按Ctrl鍵 
return; 
       switch (key) 
       { 
            case Keys.NumPad0: 
                //按下小鍵盤0之後 
                break; 
            case Keys.NumPad1: 
                //按下小鍵盤1之後 
                break; 
            case Keys.S: 
                //按下S鍵之後 
                break; 
            case Keys.Up: 
                //按下向下鍵之後 
                break; 
       } 
}

捕獲組合鍵（以全選爲例）：

private void textBox1_KeyDown(object sender, KeyEventArgs e)
{
    if (e.Control && e.KeyCode == Keys.A)
    {
        (sender as TextBox).SelectAll();
    }
}

五、KeyCode取值：

keycode    8 = BackSpace BackSpace 
keycode    9 = Tab Tab 
keycode   12 = Clear 
keycode   13 = Enter 
keycode   16 = Shift_L 
keycode   17 = Control_L 
keycode   18 = Alt_L 
keycode   19 = Pause 
keycode   20 = Caps_Lock 
keycode   27 = Escape Escape 
keycode   32 = space space 
keycode   33 = Prior 
keycode   34 = Next 
keycode   35 = End 
keycode   36 = Home 
keycode   37 = Left 
keycode   38 = Up 
keycode   39 = Right 
keycode   40 = Down 
keycode   41 = Select 
keycode   42 = Print 
keycode   43 = Execute 
keycode   45 = Insert 
keycode   46 = Delete 
keycode   47 = Help 
keycode   48 = 0 equal braceright 
keycode   49 = 1 exclam onesuperior 
keycode   50 = 2 quotedbl twosuperior 
keycode   51 = 3 section threesuperior 
keycode   52 = 4 dollar 
keycode   53 = 5 percent 
keycode   54 = 6 ampersand 
keycode   55 = 7 slash braceleft 
keycode   56 = 8 parenleft bracketleft 
keycode   57 = 9 parenright bracketright 
keycode   65 = a A 
keycode   66 = b B 
keycode   67 = c C 
keycode   68 = d D 
keycode   69 = e E EuroSign 
keycode   70 = f F 
keycode   71 = g G 
keycode   72 = h H 
keycode   73 = i I 
keycode   74 = j J 
keycode   75 = k K 
keycode   76 = l L 
keycode   77 = m M mu 
keycode   78 = n N 
keycode   79 = o O 
keycode   80 = p P 
keycode   81 = q Q at 
keycode   82 = r R 
keycode   83 = s S 
keycode   84 = t T 
keycode   85 = u U 
keycode   86 = v V 
keycode   87 = w W 
keycode   88 = x X 
keycode   89 = y Y 
keycode   90 = z Z 
keycode   96 = KP_0 KP_0 
keycode   97 = KP_1 KP_1 
keycode   98 = KP_2 KP_2 
keycode   99 = KP_3 KP_3 
keycode 100 = KP_4 KP_4 
keycode 101 = KP_5 KP_5 
keycode 102 = KP_6 KP_6 
keycode 103 = KP_7 KP_7 
keycode 104 = KP_8 KP_8 
keycode 105 = KP_9 KP_9 
keycode 106 = KP_Multiply KP_Multiply 
keycode 107 = KP_Add KP_Add 
keycode 108 = KP_Separator KP_Separator 
keycode 109 = KP_Subtract KP_Subtract 
keycode 110 = KP_Decimal KP_Decimal 
keycode 111 = KP_Divide KP_Divide 
keycode 112 = F1 
keycode 113 = F2 
keycode 114 = F3 
keycode 115 = F4 
keycode 116 = F5 
keycode 117 = F6 
keycode 118 = F7 
keycode 119 = F8 
keycode 120 = F9 
keycode 121 = F10 
keycode 122 = F11 
keycode 123 = F12 
keycode 124 = F13 
keycode 125 = F14 
keycode 126 = F15 
keycode 127 = F16 
keycode 128 = F17 
keycode 129 = F18 
keycode 130 = F19 
keycode 131 = F20 
keycode 132 = F21 
keycode 133 = F22 
keycode 134 = F23 
keycode 135 = F24 
keycode 136 = Num_Lock 
keycode 137 = Scroll_Lock 
keycode 187 = acute grave 
keycode 188 = comma semicolon 
keycode 189 = minus underscore 
keycode 190 = period colon 
keycode 192 = numbersign apostrophe 
keycode 210 = plusminus hyphen macron 
keycode 211 = 
keycode 212 = copyright registered 
keycode 213 = guillemotleft guillemotright 
keycode 214 = masculine ordfeminine 
keycode 215 = ae AE 
keycode 216 = cent yen 
keycode 217 = questiondown exclamdown 
keycode 218 = onequarter onehalf threequarters 
keycode 220 = less greater bar 
keycode 221 = plus asterisk asciitilde 
keycode 227 = multiply division 
keycode 228 = acircumflex Acircumflex 
keycode 229 = ecircumflex Ecircumflex 
keycode 230 = icircumflex Icircumflex 
keycode 231 = ocircumflex Ocircumflex 
keycode 232 = ucircumflex Ucircumflex 
keycode 233 = ntilde Ntilde 
keycode 234 = yacute Yacute 
keycode 235 = oslash Ooblique 
keycode 236 = aring Aring 
keycode 237 = ccedilla Ccedilla 
keycode 238 = thorn THORN 
keycode 239 = eth ETH 
keycode 240 = diaeresis cedilla currency 
keycode 241 = agrave Agrave atilde Atilde 
keycode 242 = egrave Egrave 
keycode 243 = igrave Igrave 
keycode 244 = ograve Ograve otilde Otilde 
keycode 245 = ugrave Ugrave 
keycode 246 = adiaeresis Adiaeresis 
keycode 247 = ediaeresis Ediaeresis 
keycode 248 = idiaeresis Idiaeresis 
keycode 249 = odiaeresis Odiaeresis 
keycode 250 = udiaeresis Udiaeresis 
keycode 251 = ssharp question backslash 
keycode 252 = asciicircum degree 
keycode 253 = 3 sterling 
keycode 254 = Mode_switch

View Code

六、如何獲取鍵盤按鈕的keyChar值（keyCode同理）

private void Form1_KeyPress(object sender, KeyPressEventArgs e)  
{  
    char Key_Char = e.KeyChar;//判斷按鍵的 Keychar  
    MessageBox.Show(((int)(Key_Char)).ToString());//轉成整數顯示
}

出處：https://www.cnblogs.com/feiyuhuo/p/5060773.html

==================================================================

雖然從字面理解, KeyDown是按下一個鍵的意思, 但實際上兩者的根本區別是, 系統由KeyDown返回鍵盤的代碼, 而後由TranslateMessage函數翻譯成成字符, 由KeyPress返回字符值. 所以在KeyDown中返回的是鍵盤的代碼, 而KeyPress返回的是ASCII字符. 因此根據你的目的, 若是隻想讀取字符, 用KeyPress, 若是想讀各鍵的狀態, 用KeyDown.

keydown：用戶在鍵盤上按下某按鍵是發生。一直按着某按鍵則會不斷觸發（opera瀏覽器除外）。
keypress：用戶按下一個按鍵，併產生一個字符時發生（也就是無論相似shift、alt、ctrl之類的鍵，就是說用戶按了一個能在屏幕上輸出字符的按鍵keypress事件纔會觸發）。一直按着某按鍵則會不斷觸發。
keyup：用戶釋放某一個按鍵是觸發。

定義和用法

完整的 key press 過程分爲兩個部分：1. 按鍵被按下；2. 按鍵被鬆開。

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

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

 
     [html]  
    
 <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]view plaincopy
         
     
 
       
     
 
       
     
 <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() {  
             $('#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>  

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

例如：keydown綁定文本框，每次點擊觸發事件，在獲取文本框的值，老是打印上次操做時文本框的內容，

這是由於keydown操做後，事件觸發了，但值還未顯示在文本框中，因此這類操做要用keyup 一個完整的按鍵動做後，才能夠獲取文本框的值。

keydown與keypress更適用於經過鍵盤控制頁面類功能的實現。

獲取鍵盤點擊的鍵位：

[html]view plaincopy
         
     
 
       
     
 
       
     
 <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>當您在上面的框中鍵入文本時，下面的 div 會顯示鍵位序號。</p>  
 <div />  
   
 </body>  
 </html>