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

時間 2020-05-21

標籤 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.