Skip to main content
Version: 4.1

Keyboard

Keyboard enables creating keyboard shortcuts in your JointJS+ application.

Learn more about the Keyboard plugin.

constructor​

constructor(opt?: ui.Keyboard.Options);

The ui.Keyboard constructor accepts the following parameters:

filter​

filter?: (event: dia.Event, keyboard: ui.Keyboard) => boolean;

[optional] A callback option that allows you to prevent Keyboard events from triggering according to custom logic.

The callback function is invoked whenever a keyboard DOM Event is fired. It is provided with the event object and the Keyboard object (for context). If the function returns false, the Keyboard event is not fired.

The default filter is isConsumerElement().

Methods​

disable()​

keyboard.disable(): void;

Stop tracking keyboard events.

enable()​

keyboard.enable(): void;

Start tracking keyboard events (enabled by default).

isActive()​

keyboard.isActive(name: string, event: ui.Keyboard.Event): boolean;

Check if key name is currently pressed. event is the DOM Event KeyboardEvent. It is available for modifiers only:

  • alt, ctrl, shift, command.

isConsumerElement()​

keyboard.isConsumerElement(event: ui.Keyboard.Event): boolean;

Checks if the element onto which the event was dispatched should consume this event and thus prevent the ui.Keyboard event from firing. event is the DOM Event KeyboardEvent.

The method returns true for inputs, selects, text-areas, and elements defined as content-editable.

isKeyPrintable()​

keyboard.isKeyPrintable(event: ui.Keyboard.Event): boolean;

Check if the key pressed is a printable character. event is the DOM Event KeyboardEvent.

off()​

keyboard.off(event: string | object, callback?: ((event: dia.Event) => void) | any, context?: any): this;

Remove a previously-bound callback function from an object. It is the same logic as mvc.Events.off().

More information about event can be found in the Event description section.

on()​

keyboard.on(event: string | object, callback?: ((event: dia.Event) => void) | any, context?: any): this;

Bind a callback function to an object. The callback will be invoked whenever the keyboard event is fired. It is the same logic as mvc.Events.on().

More information about event can be found in the Event description section.

Types​

Options​

interface Options {
filter?: (event: dia.Event, keyboard: ui.Keyboard) => boolean;
}