js组合键监听

对我而言最重要的

获取keyCode代码后,我要把它赋值给一个全局变量,然后再使用,该事件结束后再置为0;

因为我无法一直点击,一直判断他是否按下或者弹起

方式一;是的发送到

document.onkeydown = function (oEvent) {
    console.log(oEvent);
}


 document.onkeydown = functionb(oEvent) {
    var oEvent = oEvent || window.oEvent; 
    //获取键盘的keyCode值
    var nKeyCode = oEvent.keyCode || oEvent.which || oEvent.charCode;
    //获取ctrl 键对应的事件属性
    var bCtrlKeyCode = oEvent.ctrlKey || oEvent.metaKey;
     if( oEvent.nKeyCode == 83 && bCtrlKeyCode  ) {
        alert('save');
         //doSomeThing...
     }
}

方式二:

onKeyDown(event) { const keyCode = event.keyCode || event.which || event.charCode; // 有些浏览器除了通过keyCode获取输入键code,还可以通过which,charCode获取,这么写是出于浏览器兼容性考虑 const keyCombination = event.ctrlKey ; if (keyCombination && keyCode == 75) { console.log("按下了Ctrl + k键"); } }

 

方式三

document.onkeydown = function(event) {
    var keyCode = event.keyCode || event.which || event.charCode;
    var ctrlKey = event.ctrlKey || event.metaKey;
    if(ctrlKey && keyCode == 83) {
        event.preventDefault();
        alert('save');
    }
    // event.preventDefault(); // 注意:阻止默认事件不能放在外面,会阻止浏览器或者input/textarea的默认事件,应该放在相应的按键组合中去阻止
    return false;

 方式四

普通两键或三键改如何判断呢

我的思路是:在指定时间内(比如300ms),如果按了某键,就将改键的key存入指定对象上。如果超时或者已经触发了,就将保存的对象还原。
然后判断对象上是否同时存在我们要监听的按键即可。

    // 普通两键示例
    let firstTime = 0
    let doubleEvent = {}
    document.addEventListener('keyup',(e)=>{
      let currentTime = Date.now()
      if(firstTime===0){
        firstTime =  currentTime
        doubleEvent[e.key] = true
      }else if(currentTime-firstTime>300){//超过300ms
        firstTime = 0
        doubleEvent = {}
      }else{
        doubleEvent[e.key] = true
      }
      if(doubleEvent.b&&doubleEvent.c){
        console.log('b+c');
        doubleEvent = {}
        firstTime = 0
      }
    })
 


版权声明:本文为dancria原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。