其他分享
首页 > 其他分享> > 键盘事件keydown、keypress、keyup

键盘事件keydown、keypress、keyup

作者:互联网

一、触发条件

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

 

二、区分

1、触发区分

 

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

 

标签:target,keypress,keyup,keydown,键盘,keycode
来源: https://www.cnblogs.com/Walker-lyl/p/14268711.html