js & 快捷键

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;   如果满足条件的话，就屏蔽按钮操作
 }