js键盘事件以及键盘事件拦截

摘要:onkeydown: 按下键盘时触发;onkeypress: 按下有值的键时触发,注意: onkeypress按下 Ctrl、Alt、Shift、Meta 这样无值的键,这个事件不会触发对于有值的键,按下时先触发 keydown 事件,再触发这个事件

一.键盘事件

  • onkeydown: 按下键盘时触发

  • onkeypress: 按下有值的键时触发

    注意: onkeypress按下 Ctrl、Alt、Shift、Meta 这样无值的键,这个事件不会触发对于有值的键,按下时先触发 keydown 事件,再触发这个事件

  • onkeyup:松开键盘时触发该事件


二.组合键

  • ctrl相关
  • alt相关
  • meta (Mac键盘是一个四瓣的小花,Windows键盘是Windows键) 相关

  • shift相关

写一个举例其他都类似

比如ctrl+c

window.onkeydown=function (e) {
    if (e.ctrlKey) {     //其他几个类似shiftkey,altkey,metakey
        if( e.key == 'c'){     //这里最好用keycode可以无视大小写,你要是区分大小写最好这样写
            console.log('ctrl+c')
        }
    }
}

//一般简写
window.onkeydown=function (e) {
    if (e.ctrlKey&&e.key == 'c'){console.log('ctrl+c')}
}


三.拦截preventDefault

比如拦截ctrl+h事件

<script>
    window.onkeydown=function (e) {
        if (e.ctrlKey) {
                if( e.key == 'h'){
                    console.log('ctrl+h')
                    e.preventDefault();
                }
        }
    }
</script>

但是有些按键没法拦截具体为啥没有深究过也没用到过,比如 Chrome

CtrlN
CtrlShiftN
CtrlT
CtrlShiftT
CtrlW
CtrlShiftW
//没法拦截 

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_6545