Keyboard Shortcut (simple javascript library)!

Simple javascript library to enable keyboard shortcut on the browser, A lightweight JavaScript library for keyboard shortcuts.

Supports registering key combinations, attaching focus to elements, binding DOM events to shortcuts, and handling window focus/blur state.

📦 Installation

    npm i kbs

add script (soon to publish on npm)

<script src="https://cdn.jsdelivr.net/npm/kbs@latest/ark-kbs.js"></script>

It automatically instantiates as a global object:

var kbs = new Kbs();

🚀 Features

• Register single or multi-key shortcuts (alt + h, ctrl + s, etc.).
• Attach focus shortcuts to inputs, buttons, or any focusable element.
• Bind shortcuts to DOM events (click, mousedown, etc.).
• Detect focusable elements automatically.
• Handle window blur/focus with a helpful overlay message.
• Utility to safely convert HTML strings to DOM elements.

Documentation

1. Focus

    <div contenteditable="true" id="k1"> Content editable Shorcut ('alt' + '1')</div>
    <div contenteditable="true" id="k2">Conten editable Shorcut ('alt' + '2')</div>
    <div id="k3">This is not focusable, so you will see a warning in console that can not be attachable</div>

kbs.attachFocus(['alt', '1'], document.getElementById("k1")); //shortcut alt + 1
kbs.attachFocus(['alt', '2'], document.getElementById("k2")); //shortcut alt + 2
kbs.attachFocus(['alt', '3'], document.getElementById("k3")); //shortcut alt + 3

2. Attach Event

    html:
      <button id="b2">Click Me ('alt' + 'c') </button>
    js:
        function click2(e) {
            console.log(e);
            console.log(e.kcom);
            alert('Lord Jesus my Protector ');;
        }
        var b2 = document.getElementById("b2");
        b2.onclick = click2;
        kbs.attachEvent(['alt', 'b'], b2, 'click');

3. Document focus out is alerted on the screen

Tested & Will work only on modern browsers

Here’s a README.md draft you can ship with your ark-kbs.js library. It documents all existing functionalities, usage examples, and author info in an intuitive developer-friendly format:

⚡ Usage

1. Add a Keyboard Shortcut

kbs.addkeycombination(['alt', 'h'], (e, combo) => {
    alert(`Shortcut pressed: ${combo}`);
});

2. Attach Focus to Element

<input type="text" id="username" placeholder="Type your name">

const input = document.getElementById('username');
kbs.attachFocus(['alt', 'u'], input); 
// Press Alt + U → input will gain focus

3. Attach Event to Element

<button id="saveBtn">Save</button>

const button = document.getElementById('saveBtn');
kbs.attachEvent(['ctrl', 's'], button, 'click'); 
// Press Ctrl + S → button click triggered

4. Window Blur / Focus Handling

• When window loses focus → a message Lost Focus... appears in the corner.
• When window regains focus → the message disappears.

5. Utility: Convert Text to DOM

const el = kbs.textToDom('<div class="note">Hello</div>');
document.body.append(el);

6. Utility: Check Focusable Elements

const input = document.querySelector('input');
console.log(kbs.isFocusable(input)); // true

🎹 Supported Keys

The library includes mappings for:

• Alphabets: a–z
• Numbers: 0–9 (both main row and numpad)
• Navigation: arrowup, arrowdown, arrowleft, arrowright
• Special: tab, enter, escape, space, backspace, etc.
• Function keys: f1–f12
• Modifiers: shiftleft, shiftright, ctrlleft, ctrlrigght, altleft, altright, meta

⚠️ Known issues: typos exist in key map (ctrlrigght, braketright) which may affect detection.

⚠️ Known Limitations

• Uses deprecated e.keyCode (modern browsers recommend e.code).
• No built-in support for removing shortcuts.
• Holding down a key may cause repeated buffer entries.
• Event triggering uses HTMLEvents (not specialized MouseEvent / KeyboardEvent).

👨‍💻 Author

Immanuel Raj 📧 \[email protected] 🌐 \https://github.com/ir-dev/

📜 License

MIT License. Free to use, modify, and distribute.

Would you like me to also prepare a "Quick Demo HTML page" (with examples wired up) that can be shipped along with this README for developers to test the library instantly?