Define Shortcut Keys by user (add or edit by user in web app)?

I have a web app create with angular 7.0 and Nodejs. I want to add a shortcut engine (user customizable) like Microsoft Word that user can add or edit or modify default shortcut keys for some function in this app. is there any code or tips for doing like this?

enter image description here

2 answers

  • answered 2019-06-17 14:49 Florian

    I guess this package suits your needs !

  • answered 2019-06-17 15:32 Ben Racicot

    I know there is an answer here but I do my best to stay away from packages unless I'm ready to do a deep-dive on what type of code I would be adding to my project.

    Here is the Angular/JavaScript way to trigger functions on keyboard events.

    @HostListener('window:keyup', ['$event']) keyEvent(event: KeyboardEvent) {
        if (event.keyCode === 27 || event.keyCode === 13) {
            // console.log(event.keyCode);
        }
    }
    

    I typically use keycode.info or logging key presses to find my key numbers.

    Pseudo code based on comment question regarding user-specific key bindings.

    mock user object saved in database

    user {
        ...
        bindings{
            featureOne: 27 // key chosen by user for featureOne
            featureTwo: 13 // key chosen by user for featureTwo
        }
    }
    

    Then you can refer to those choices in the listener

    if (event.keyCode === user.bindings.featureOne) {
       // trigger featureOne
    }