Keyboard Shortcuts

import { registerKeyboardShortcut } from 'cx/ui';

CxJS provides registerKeyboardShortcut for listening to keyboard shortcuts. Shortcuts only trigger when the document body has focus (not when focused on input fields).

Example

 <div class="flex flex-col gap-4" controller={PageController}>
  <div class="text-sm text-gray-600">
    Click outside the checkboxes and press the shortcuts:
  </div>
  <div class="flex flex-col gap-2">
    <Checkbox value={m.enterPressed} text="Enter" readOnly />
    <Checkbox value={m.shiftAPressed} text="Shift + A" readOnly />
  </div>
</div> 
 class PageController extends Controller {
  unregisterEnter!: () => void;
  unregisterShiftA!: () => void;

  onInit() {
    this.unregisterEnter = registerKeyboardShortcut(KeyCode.enter, () => {
      this.store.toggle(m.enterPressed);
    });

    this.unregisterShiftA = registerKeyboardShortcut(
      { keyCode: KeyCode.a, shiftKey: true },
      () => {
        this.store.toggle(m.shiftAPressed);
      },
    );
  }

  onDestroy() {
    this.unregisterEnter();
    this.unregisterShiftA();
  }
} 
 interface PageModel {
  enterPressed: boolean;
  shiftAPressed: boolean;
}

const m = createModel<PageModel>(); 
 import { createModel } from "cx/data";
import { Controller, registerKeyboardShortcut } from "cx/ui";
import { KeyCode } from "cx/util";
import { Checkbox } from "cx/widgets"; 

Click outside the checkboxes and press the shortcuts:

Enter

Shift + A

Key Argument

The first argument can be a simple key code or an object for key combinations:

// Simple key
registerKeyboardShortcut(KeyCode.enter, callback);

// Key combination
registerKeyboardShortcut({ keyCode: KeyCode.a, shiftKey: true }, callback);

The object form accepts:

keyCode (required) - A value from the KeyCode class
shiftKey - Require Shift key
ctrlKey - Require Ctrl key
altKey - Require Alt key

KeyCode

import { KeyCode } from 'cx/util';

Common key codes:

Key	Code
Enter	`KeyCode.enter`
Escape	`KeyCode.esc`
Space	`KeyCode.space`
Tab	`KeyCode.tab`
Backspace	`KeyCode.backspace`
Delete	`KeyCode.delete`
Arrow keys	`KeyCode.up`, `KeyCode.down`, `KeyCode.left`, `KeyCode.right`
Page Up/Down	`KeyCode.pageUp`, `KeyCode.pageDown`
Home/End	`KeyCode.home`, `KeyCode.end`
Letter A	`KeyCode.a`

Warning

Always unregister keyboard shortcuts when they’re no longer needed to prevent memory leaks. Call the unregister function returned by registerKeyboardShortcut in the controller’s onDestroy method.