View Code? Open in Web Editor NEW

This is a Javascript library that helps with listening to browser Keyboard changes, and also helps in managing keyboard shortcuts in the browser. browser keyboard controller

License: MIT License

HTML 18.88% TypeScript 50.77% JavaScript 30.35%

keybinder's Introduction

Key Bonder/Binder

This is a javascript library for frontend development (both vallina and frameworks) that helps with keyboard binding / combinations .

This currently supports most keys in windows OS you can visit the Home page to check the key code for your machine

Requirement

Your script need to be running on a web server, for development you could use,
- live server extension is vscode
- node npx server by running npx serve
- to avoid errors like

How to use

Install and Import

Using Vallina javascript

<script src="https://codad5.github.io/keybinder/lib/keybinder.js"></script>

Using a framework

Install

npm i domkeybinder

Import

import KeyBinder from 'domkeybinder'

Initialize your controller object

Define your keyboard Controller

const keyController = new KeyBinder({
    default_listener: 'keyup', // can be keydown, keypress
    element: window, // can be any element or window eg `docmuent.querySelector('.myeditor')
    // case_sensitive:true, // this is if you want to make the listener case sensitive
    allow_default: true // this is set to default of false and prevents any default keyboard action
})

Add your listener

For easier and better coding experience it best to create a sub function like this

const ListenToKey = (key, ...data) => keyController.ListenToKey(key, ...data)

Then you can add listeners like this

ListenToKey('B+G', () => {
    //your code...
})

ListenToKey('shift+c', () => {
    //your code...
})

OR this

keyController.ListenToKey('enter', (data) => {
    //your code...
})

keyController.ListenToKey('ctrl+space', () => {
    //your code...
})

Diffrent Combination one action

This is if you want to one action(callback), tied to different combination

ListenToKey('ctrl+space', 'ctrl+m', () => {
    alert(`your called ${data.combination}`)
    document.querySelector('#scdiv').innerHTML += 'Do you mean Ctrl+c? try Ctrl+c'
})

Avaliable methods

method	Description
ListenToKey	Add new Listener
getCombinations	Get all avaliable combinations
clear	Remove all avaliable combinations
restore	Restore all previous avaliable combinations