onkeydown 、onkeypress 、onkeyup详解

keydown: 当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。

keypress: 当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。

（keypress事件存在跨浏览器问题，按下非字符键时有的也会触发keypress。）

keyup: 当用户释放键盘上的按键时触发。

　　在用户按了一下键盘上的字符键时，首先会触发 keydown 事件，然后紧接着是 keypress 事件，最后会触发 keyup 事件。其中，keydown 和 keypress 都是在文本框发生变化之前被触发的；而 keyup 事件则是在文本框已经发生变化之后被触发的。如果用户按下了一个字符键不放，就会重复触发 keydown 和keypress 事件，直到用户松开该键为止。

window.onkeydown = function () {
  console.log('down');
}
window.onkeypress = function () {
  console.log('press');
}
window.onkeyup = function () {
  console.log('up');
}

 执行以上代码如果按下任意字符键之后立即松开， 控制台会打印出：

down
press
up

如果按下字符键不放最后再松开，控制台会打印出：

down
press
down
press
//一直触发这两个事件
up

　　如果用户按下的是一个非字符键，那么首先会触发 keydown 事件，然后就是 keyup 事件。如果按住这个非字符键不放，那么就会一直重复触发 keydown 事件，直到用户松开这个键，此时会触发 keyup 事件。

 

键码：

在发生 keydown 和keypress 事件时，event 对象的 keyCode 属性的值与 ASCII 码中对应小写字母或数字的编码相同。请看下面这个例子：

var textbox = document.getElementById('myText');
textbox.addEventListener('keyup', function (event) {
  console.log(event.keyCode);
}, false);

在这个例子中，用户每次在文本框中按键触发 keyup 事件时，都会显示 keyCode 的值。

在取得了字符编码后，就可以使用 String.fromCharCode() 将其转换成实际的字符。如下：

var textbox = document.getElementById('myText');
textbox.addEventListener('keyup', function (event) {
  console.log(String.fromCharCode(event.keyCode));
}, false);

 

转载于:https://www.cnblogs.com/jongsuk0214/p/6893782.html