一. 键盘事件
- 键盘事件触发顺序为:
keydown -> keypress -> keyup. - 当用户按下一个字符键不放,会重复触发
keydown、keypress,直到用户松开该键,触发一次keyup. - 当用户按下一个系统功能键不放,会重复触发
keydown,直到用户松开该键,触发一次keyup. - 在
keyup中无法阻止浏览器默认事件,在keypress时,浏览器默认行为已经完成。 -
keypress不支持上下左右键等系统功能键。
二. keyCode vs charCode
keypress 时的 keyCode、charCode 与 keydown、keyup 时的 keyCode charCode 不一致:
<script type="text/javascript">
function keyPress(e) {
console.log( 'Keypress keyCode', e.keyCode);
console.log( 'Keypress charCode', e.charCode);
}
function keyDown(e) {
console.log( 'Keydown keyCode', e.keyCode);
console.log( 'Keydown charCode', e.charCode);
}
function keyUp(e) {
console.log( 'Keyup keyCode', e.keyCode);
console.log( 'Keyup charCode', e.charCode);
}
</script>
<body
onkeypress="keyPress(event);"
onkeydown="keyDown(event);"
onkeyup="keyUp(event)"
></body>
Screen Shot 2018-12-25 at 3.32.06 PM.png
https://stackoverflow.com/questions/11030532/keypress-and-keyup-why-is-the-keycode-different 给出的解释:
这些事件的目的完全不同。使用 keyup 和 keydown 识别物理键,使用keypress 识别键入的字符。这两者是根本不同的任务,有不同的事件,不要试图混合两者。特别是,keypress 事件上的 keyCode 通常是多余的,不应该使用.(旧的IE中除外,Jan Wolter's article on key events); 对于可打印的按键,它通常与charCode 相同,尽管浏览器之间存在一些差异。
event 对象包含一个 keyCode 属性和一个 charCode 属性.
- 当是
keydownkeyup事件时,keyCode表示的就是你具体按的键(也称为virtual keycode),charCode为0. - 当捕捉的是
keypress事件时,keyCode为0,charCode指的是你按下的字符(而 IE 只有一个KeyCode属性,它指的是你键入的字符(character code))
鉴于 IE 和 FF 中的区别,建议只使用keydown和keyup事件.









网友评论