js鍵盤事件以及鍵盤事件攔截

一.鍵盤事件

  • onkeydown: 按下鍵盤時觸發code

  • onkeypress: 按下有值的鍵時觸發事件

    注意: onkeypress按下 CtrlAltShiftMeta 這樣無值的鍵,這個事件不會觸發對於有值的鍵,按下時先觸發 keydown 事件,再觸發這個事件ip

  • onkeyup:鬆開鍵盤時觸發該事件io

二.組合鍵

  • ctrl相關
  • alt相關
  • meta (Mac鍵盤是一個四瓣的小花,Windows鍵盤是Windows鍵) 相關console

  • shift相關event

寫一個舉例其餘都相似function

好比ctrl+cclass

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事件meta

<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
//無法攔截
相關文章
相關標籤/搜索