js & 快捷鍵

demo

js-keyboard-shortcuts.html

https://codepen.io/webgeeker/pen/MLYrNq

    let isCtrl = false;
    document.addEventListener("keyup", () => {
        //
    });
    document.addEventListener("keyup", function(e) {
        let key = e.which || e.keyCode;
        // console.log(`keyup & e =`, e);
        // console.log(`e.keyCode =`, e.keyCode);
        // console.log(`e.which =`, e.keyCode);
        // console.log(`key =`, key);
        if(e.which === 17) {
            // init
            isCtrl = false;
        }
    });
    document.addEventListener("keydown", function(e) {
        let key = e.which || e.keyCode;
        console.log(`keydown & e =`, e);
        // console.log(`e.keyCode =`, e.keyCode);
        // console.log(`e.which =`, e.keyCode);
        // console.log(`key =`, key);
        if(e.which === 17) {
            isCtrl = true;
        }
        if(e.which === 83 && isCtrl === true) {
            console.log(`you pressed Ctrl + S`);
        }
        if(e.which === 68 && isCtrl === true) {
            console.log(`you pressed Ctrl + D`);
        }
        if(e.which === 70 && isCtrl === true) {
            console.log(`you pressed Ctrl + F`);
        }
        if(e.which === 88 && isCtrl === true) {
            console.log(`you pressed Ctrl + X`);
        }
    });
    // document.onkeyup = function(e) {
    //     if(e.which === 17) {
    //         isCtrl = false;
    //     }
    // }
    // document.onkeydown = function(e) {
    //     if(e.which === 17) {
    //         isCtrl = true;
    //     }
    //     if(e.which === 83 && isCtrl === true) {
    //         // alert('Keyboard shortcuts are cool!');
    //         return false;
    //     }
    // }

---

https://github.com/wesbos/JavaScript30

https://github.com/wesbos/JavaScript30/blob/master/01 - JavaScript Drum Kit/index-FINISHED.html

https://javascript30.com/

https://stackoverflow.com/questions/2511388/how-can-i-add-a-javascript-keyboard-shortcut-to-an-existing-javascript-function
https://www.w3schools.com/TAGs/ref_keyboardshortcuts.asp

js libs

https://www.cnblogs.com/joyco773/p/6182280.html
https://wangchujiang.com/hotkeys/
https://www.npmjs.com/package/hotkeys-js

keyboard shortcuts

https://www.catswhocode.com/blog/using-keyboard-shortcuts-in-javascript

Ctrl + S

var isCtrl = false;
document.onkeyup=function(e) {
    if(e.which == 17) isCtrl=false;
}document.onkeydown=function(e){
    if(e.which == 17) isCtrl=true;
    if(e.which == 83 && isCtrl == true) {
         alert('Keyboard shortcuts are cool!');
         return false;
    }
}

Keyboard codes reference

Key	Keyboard code
Backspace	8
Tab	9
Enter	13
Shift	16
Ctrl	17
Alt	18
Pause	19
Capslock	20
Esc	27
Page up	33
Page down	34
End	35
Home	36
Left arrow	37
Up arrow	38
Right arrow	39
Down arrow	40
Insert	45
Delete	46
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57
a	65
b	66
c	67
d	68
e	69
f	70
g	71
h	72
i	73
j	74
k	75
l	76
m	77
n	78
o	79
p	80
q	81
r	82
s	83
t	84
u	85
v	86
w	87
x	88
y	89
z	90
0 (numpad)	96
1 (numpad)	97
2 (numpad)	98
3 (numpad)	99
4 (numpad)	100
5 (numpad)	101
6 (numpad)	102
7 (numpad)	103
8 (numpad)	104
9 (numpad)	105
*	106
+	107
–	109
.	110
/	111
F1	112
F2	113
F3	114
F4	115
F5	116
F6	117
F7	118
F8	119
F9	120
F10	121
F11	122
F12	123
=	187
Coma	188
Slash /	191
Backslash \	220

https://blog.csdn.net/dazhongyue/article/details/60126793

 document.onkeydown=onKeyDown;
 function onKeyDown(){
     if(window.event.altKey||window.event.ctrlKey....||(window.event.keyCode==65))
    alert("alt或者ctrl或者a");
    //添加要執行的代碼  
    //event.returnValue=false;   如果滿足條件的話，就屏蔽按鈕操作 
 }

---

&copyxgqfrms 2012-2020

www.cnblogs.com 發布文章使用：只允許注冊用戶才可以訪問！

---