Js和jq事件—鍵盤事件KeyboardEvent
鍵盤事件keydown，keypress和keyup，還需要涉及到一個文本事件textInput。
keydown，keypress和keyup事件在js和jq中都支持。但是你想要觸發這三個事件，必須有文本輸入操作（該元素是，或者包含的子元素是文本輸入元素—通過冒泡觸發）。
三個事件的觸發順序是按下鍵盤會觸發keydown，keypress，如果按着鍵盤不放則會反復觸發這兩個事件，當放開鍵盤的時候觸發keyup。對於鍵盤上每個按鍵，這三個事件都是單獨存在的，都需要一個keyup來結束這系列事件。
關於ctrl鍵，shift鍵，alt鍵，meta鍵，在鍵盤事件中也有對應的altKey, ctrlKey, metaKey, shiftKey。它們按下時不會觸發keypress事件，每一次按下（不管按多久）放開，都只會觸發一次keydown一次keyup。它們的按鍵名稱分別是
Shift-Process(谷歌中keydown時顯示)/Shift，Ctrol—Control/Control，Alt—Alt/Alt。
使用監聽器綁定，關注事件中包含的屬性如下：
key是指按鍵名稱，如a,b,c,d,e
keyCode是指按鍵碼，在keyup和keydown階段顯示的是按鍵碼a-65,b-66....，在keypress階段谷歌會顯示ascii碼，火狐為0
charCode是指字符碼，在keyup和keydown階段顯示的是0，在keypress階段會顯示ascii碼
which在keyup和keydown階段顯示的是按鍵碼a-65,b-66....，在keypress階段會顯示ascii碼
altKey, ctrlKey, metaKey, shiftKey
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8"/>
<script src='js/jquery-3.3.1.min.js'></script>
<style>
</style>
</head>
<body>
<input type='text' id="c1"></input>
<input type='text' id="c2"></input>
<script type="text/javascript">
//********顯示事件的內容
function showit(e){
var e = e||window.event||event;
//console.log(e);
console.log(e.type);
console.log(e.key);//按鍵a，b
console.log(e.keyCode);//在keyup和keydown階段顯示的是按鍵碼a-65,b-66....，在keypress階段谷歌會顯示ascii碼，火狐為0
console.log(e.charCode);//在keyup和keydown階段顯示的是0，在keypress階段會顯示ascii碼
console.log(e.which);//在keyup和keydown階段顯示的是按鍵碼a-65,b-66....，在keypress階段會顯示ascii碼
}
//********js
document.getElementById('c1').onkeypress=showit;
document.getElementById('c1').addEventListener('keyup',showit);
document.getElementById('c1').addEventListener('keydown',showit);
//*********jquery
$('#c2').keypress(showit);
$('#c2').on('keydown',showit);
$('#c2').keyup(showit);
</script>
</body>
</html>
textInput事件（DOM3事件）
用戶在可編輯區域中輸入字符時，就會觸發這個事件。
textInput用來代替keypress，二者區別：
任何可以獲得焦點的元素都可以觸發keypress事件，但只有可編輯區域才能觸發textInput事件。
textInput事件只會在用戶按下能夠輸入實際字符的鍵時才會觸發，而keypress事件則在按下那些能夠影響文本顯示的鍵時也會觸發（比如退格鍵）。
data屬性
textInput事件主要考慮的是字符，因此它的event對象中還包含一個data屬性，data值為用戶輸入的字符。
用戶按下S鍵，data值就是“s”
用戶按下上檔鍵時按下S鍵，data值就是"S"
EventUtil.addHandler(textbox,"textInput",function(event){ event=EventUtil.getEvent(event); console.log(event.data); });
inputMethod屬性
另外，event對象上還有一個屬性，叫inputMethod，表示文本輸入到文本框中的方式。使用這個屬性可以確定文本是如何輸入到控件中，從而驗證其有效性。
0，表示瀏覽器不確定是怎么輸入的
1，表示是使用鍵盤輸入的
2，表示文本是粘貼進來的
3，表示文本是拖放進來的
4，表示文本是使用IME輸入的
5，表示文本是通過在表單中選擇某一項輸入的
6，表示文本是通過手寫輸入的（比如使用手寫筆）
7，表示文本是通過語音輸入的
8，表示文本是通過集中方法組合輸入的
9，表示文本是通過腳本輸入的
兼容性：支持textInput屬性的瀏覽器有IE9+，Safari和Chrome，只有IE支持inputMethod屬性。
參考：
http://www.jxbh.cn/article/1847.html
https://www.cnblogs.com/starof/p/6558581.html