jw-keyboard

An instance class which hooks into keyup and keydown, and keeps track of all the keys pressed.

Demo

install

Methods

| Method | Parameters | Description | | ------------------------- | -------------------------- | ------------------------------------------------------------------------ | | attach | element: DOM element | append the keyboard to the a DOM element and event functions to it. | | detach | | disengage the keyboard from DOM element and event functions from it. | | setPreventDefault | preventDefault: boolean | toggle value for keyboard prevent default on all events. | | setPreventHoldDownEvent | preventHoldDown: boolean | toggle value for keyboard skipping further key down events. | | onKeyDown | handler: function | bind an event handler to the key down event. Returns a method to unbind. | | clearKeyDown | | unbind all event handlers from the key down event. | | onKeyUp | handler: function | bind an event handler to the key up event. Returns a method to unbind. | | clearKeyUp | | unbind all event handlers from the key up event. | | hasKeyPressed | | check if a given keyCode has been pressed. | | getLastKeyPressed | | get the last keyCode that has been pressed. |

Handler Event

On handling the event, the same event object as the one from addEventListener will be passed as a parameter, with an additional keyboard object, which holds the following properties:

| Prop | Description | | ----------------- | -------------------------------------------------------- | | keyCodesPressed | the list of key codes of the keys that has been pressed. |

Usage

import Keyboard, { Keys } from "jw-keyboard";

/* Get the container for the keyboard. */
let container = document.getElementById("container");

/* Create a keyboard instance, with the element as its container.
 * This is to allow the keyboard to monitor all key events from the container. */
let keyboard = new Keyboard(container);

/** Append the keyboard to the a DOM element and event handlers to it. */
keyboard.attach(container);

/** Detach the keyboard from DOM element and event handlers from it. */
keyboard.detach();

/** Toggle value for keyboard prevent default on all events. */
keyboard.setPreventDefault(false);

/** Toggle value for keyboard skipping further key down events. */
keyboard.setPreventHoldDownEvent(false);

/** Bind an event handler to the key down event. */
let removeKeyDown = keyboard.onKeyDown(event => { ... });

/** Unbind an event handler to the key down event. */
removeKeyDown();

/** Unbind all event handlers from the key down event. */
keyboard.clearKeyDown();

/** Bind an event handler to the key up event. */
let removeKeyUp = keyboard.onKeyUp(event => { ... });

/** Unbind an event handler to the key up event. */
removeKeyUp();

/** Unbind all event handlers from the key up event. */
keyboard.clearKeyUp();

/** Check if a given keyCode has been pressed. */
keyboard.hasKeyPressed(keyCode);

/** Get the last keyCode that has been pressed. */
keyboard.getLastKeyPressed();