Web UI component: j-Shortcuts


  • Info
  • HTML
  • JS
  • CSS
  • Meta

j-Shortcuts

This component can help with creating keyboard shortcuts. The component is singleton.

Methods:

  • component.register(shortcut, callback(e), [prevent]) - registers a new shortcut
  • component.exec('shortcut') - evaluates shortcut

Shortcuts:

  • enter
  • esc
  • tab
  • cmd, meta, win
  • shift, capslock
  • ctrl
  • alt
  • space
  • backspace, del, delete
  • left, up, right, down
  • F1, F2, F3, F4, F5, F6, F7, F8, F9, F10, F11, F12
  • or custom key-codes {Number} or key-characters {String(1)}
  • ins
  • remove meansbackspace or delete
  • supports .shortcut, read more below

Example:

// SETTER(true, ...) --> works in jComponent +v9.0.0

SETTER(true, 'shortcuts/register', 'cmd + enter', function(e) {
    console.log('PRESSED: CMD + ENTER');
});

SETTER(true, 'shortcuts/register', 'alt + p', function(e) {
    console.log('PRESSED: ALT + P');
});

SETTER(true, 'shortcuts/register', 'esc', function(e) {
    console.log('PRESSED: esc');
});

// +v3 supports multiple shortcuts at the one time:
SETTER(true, 'shortcuts/register', 'cmd+enter, ctrl+enter', function(e) {
    console.log('PRESSED: CMD + ENTER');
});

New inline declaration:

<button class="exec shortcut" data-shortcut="F1" data-exec="METHO_TO_CALL">Help</button>

New session shortcuts:

// Open session for new shortcuts
// The methods disables all registered shortcuts while session is not end
SETTER('shortcuts/session', function(register) {
    register('esc', function() {

        // Cancels session
        SETTER('shortcuts/end');

    });
});

Author