Javascript和jquery事件--键盘事件KeyboardEvent
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
