键盘事件

键盘事件

键盘事件不是所有元素都能触发，表单元素（有选中的效果），document（是否在当前页面），window可以触发（是否在当前tab窗口）

以下三个事件有执行顺序之分

三个事件的执行顺序是 keydown keypress keyup

• keydown

键盘上某个按键按下时触发 能识别所有的按键，实际开发中经常使用

中文输入法也好使

• keypress

必须要准确嵌入到文本筐里内才会触发，即出现在文本框里的内容要和按下的按键一致时才可以触发

它不能识别功能键 ctrl shift 左右上下箭头等，但是keycode属性能区分大小写

比如当你输入法为中文时，检测到你按下的是英文字母但是并没有输入就不会触发keypress

• keyup

键盘上某个按键松开(抬起)时触发，任意按键

键盘事件对象

键盘事件对象的信息：

• 事件对象里有一个key属性

作用：表示你按下的那个按键

可以区分大小写，所有的按键都适用

兼容问题： ie低版本不能使用

键盘事件对象的key属性2018以后新增的属性，不经常用，因为兼容性问题

1
2
3
4
5
6
7
8

input.addEventListener('keydown', function (e) {
  if (e.key == 'S') {
        console.log('大写s');
    }
    if (e.key == 's') {
        console.log('小写s');
    }
})

• 事件对象里有一个keycode属性

作用：表示你按下的那个按键，但是以编码的顺序返回（ASC II值中的顺序）

兼容问题：在火狐FireFox<2的火狐浏览器不支持，但是现在低版本的火狐已经装不上了，市面很少，所以其兼容性可以不用考虑

s在ASC码中代表为83

1
2
3
4
5

input.addEventListener('keydown', function (e) {
   if (e.keyCode == '83' && e.shiftKey) {
        console.log('大写s');
    }
})

判断按下的是否是组合按键

按下的是不是组合按键

事件对象里的altkey属性：表示alt键 mac上 option键

事件对象里的ctrlkey属性：表示ctrl键

事件对象里的shiftkey属性：表示shift键

事件对象里的metakey属性：表示win键（菜单键） mac上command键

ie浏览器 不支持 键盘对象的metakey属性，在ie浏览器中只能靠键盘码去捕获了

这四个属性的值都是布尔值

表示你在按下其他按键的时候，如果这四个属性的某一个值为true，表示同时按下了这个按键

1
2
3
4
5
6
7
8
9
10
11
12

var inp=document.querySelector('input');
inp.addEventListener('keydown',function(e){
        e=e||window.event;//兼容性写法
      if(e.shiftKey && e.keyCode==65){
        console.log('你按下的是shift+a');
        //判断组合按键
        //按下大写A，即shift+a
      };
      if(e.shiftKey && e.ctrlKey && e.altKey && e.keyCode==65){
        console.log('你按下的是shift+ctrl+alt+a');
      }  
})