S4W - Shortcuts For Web creates keyboard shortcuts to execute actions on your web, like click on a button, focus on a input text element, assign value to a input select element and even execute custom actions.

For example, you can assign the Ctrl + Shift + "B" key shortcut to click on a button with de following code:

    S4W.addShortcut({ctrlKey:true, shiftKey: true, code:'KeyB'}, 'Click the button')
        .addClickHTMLElement(S4W.elementById('myButton'));
    S4W.setActive(true);

This library can show/hide the shortcuts on its elements by calling explicitly a JavaScript function or the user can do it by pressing Ctrl + Shift + K:

The key combination Ctrl + Shift + K can be changed, it is configurable.
You can set the tooltip's style by changing CSS clasess, also you can set the tooltip's position of each tooltip by code.

The user can show/hide the list of defined shortcuts on the web page by pressing Ctrl + Shift + L.
Here, you can see a list of shortcuts for this example:

The style of this list is configurable by CSS classes and the key combination Ctrl + Shift + L is configurable. If you don't need show the list of shortcuts, you can disable it on your project.

The library comes with its documentation and examples

• There are not library dependencies
• Visual tooltips customizable by CSS classes and JavaScript
• Developed in TypeScript, generated Javascript file is also included
• Allows add and remove shortcuts in runtime
• You can enable/disable this library at convenience, default is disabled
• Allows show to the user the list of shortcuts on a popup, the styles are customizables by css classes
• Default language is English, but you can define your own text messages
• Well documented

This library uses functions available in all modern web Browsers, it was tested in Chrome, Firefox and Safari.
Does not require other libraries

Add the S4W.js file:

<script src="src/S4W.js"></script>

Add the css classes:

<link rel="stylesheet" href="css/shortcuts4web.css">

The library is well documented and has three examples that you can use to learn how to use it.

Example:
This simple example will bind the Ctrl + Shift + "H" shortcut to a button click action.
Add a button with an id attribute:

<button id="btnSayHello" onclick="alert('Hello!')">Say Hello</button>

Add the next JavaScript code to your project:

<script>
    window.onload = (()=>{
        subcribeEvents();
    })
    
    function subcribeEvents(){
        S4W.addShortcut({code:'KeyH', ctrlKey:true, shiftKey: true}, 'Click button Say Hello')
            .addClickHTMLElement(S4W.elementById('btnSayHello'));
        S4W.setActive(true);
    }
</script>