键盘事件keydown、keypress、keyup

一、触发条件

当某个对象有焦点且有监听keydown、keypress、keyup事件时，通过按下松开键盘的某个键来触发

 

二、区分

1、触发区分

• keydown是按下键盘的任何键触发
• keypress是按下键盘的键，且能翻译为ASCII字符才会触发
• keyup则是按下键盘的键，在松开时触发

 

keydown在按下的时候返回键盘上的代码值，然后由TranslateMessage函数翻译成字符，并且由keypress返回字符值。

所以也可以理解为，keydown获取键盘的代码值，而keypress获取键盘的字符值（ASCII字符），keydown和keyup更加高级，处理更加复杂一些。

【按下键盘的键不松开，则会一直触发keydown和keypess（如果keypress能触发）】

【按下shift + 1，再同时松开，keydown和keyup触发两次，中间keypress触发一次，keypress返回的key为！，而keydown和keyup返回的key分别是shift和！】

 

2、触发顺序

keydown、keypress、keyup

 

3、属性区分

1）keycode

keypress事件的keycode属性返回的是字符代码，即ASCII字符对应的值

keydown、keyup事件的keycode属性返回的是键盘代码，即键盘上真实按键对应的数字

eg. 

比如按下键盘的字母A

keypress的keycode为97

keydown、keyup的keycode为65

 

2）charcode

表示的是keypres触发按键的字符代码，仅适用ASCII字符

按下非字符键，以及keydown和keyup返回的charcode，值是0

 

3）which

和keycode一样，只是不兼容IE8以下浏览器

 

兼容性写法：keycode = event.which || event.keycode

 

三、不同浏览器兼容性

IE：只有keycode,【高版本IE有which，但IE8以下没有which】

Firfox：只有charcode和which

Opera：只有keycode和which

Chrome：keycode、charcode、which都有

 

四、使用例子

输入框输入限制只有空格和数字

const oInput = document.getElementById("input");
    // 键盘输入限制【空格和数字】
    oInput.addEventListener("keypress", e => {
      e = e || window.event;
      const target = e.target || e.srcElement;
      const key = e.keycode || e.which || e.charcode;
      if (key != 32 && (key < 48 || key > 57)) {
        e.preventDefault();
      }
    });
    // 存储原始value,用于恢复
    let currentValue = oInput.value || "";
    oInput.addEventListener("input", e => {
      e = e || window.event;
      const target = e.target || e.srcElement;
      if ( /^[0-9]*$/.test(target.value)) {
        currentValue = target.value;
      } else {
        target.value = currentValue;
        target.setSelectionRange(selection.selectionStart, selection.selectionEnd);
      } 
    });
    // 更新存储光标位置
    let selection = {};
    oInput.addEventListener("keydown", e => {
      e = e || window.event;
      const target = e.target || e.srcElement;
      selection = {
        selectionStart: target.selectionStart,
        selectionEnd: target.selectionEnd
      }
    });

 

 

参考

https://search.chongbuluo.com/

https://www.cnblogs.com/xcsn/p/3413074.html

https://mp.weixin.qq.com/s/p3fO8mt87ngalH11kk6WOg

-----smile