Key mappings

vuEPG maps keys to key actions. Each action defines codes, whether to prevent browser behavior and an optional callback.

Default actions

/**
 * 默认按键映射：兼顾 PC 键盘与常见机顶盒遥控器。
 * 字符串为 `event.code`；数字为 `event.which` / `event.keyCode`，
 * 只在 `event.code` 缺失（旧内核）或为 `"Unidentified"` 时参与匹配。
 */
const DEFAULT_KEY_ACTIONS: ReadonlyMap<string, KeyAction> = new Map([
  // 38 方向键 · 19 Android 方向键 · 87 W 键
  ["UP", { codes: ["ArrowUp", 87, 19, 38], preventDefault: true, callback: null }],
  // 40 方向键 · 20 Android 方向键 · 83 S 键 · 47 Android S 键
  ["DOWN", { codes: ["ArrowDown", 83, 40, 20, 47], preventDefault: true, callback: null }],
  // 37 方向键 · 21 Android 方向键 · 65 A 键 · 29 Android A 键
  ["LEFT", { codes: ["ArrowLeft", 65, 29, 21, 37], preventDefault: true, callback: null }],
  // 39 方向键 · 22 Android 方向键 · 68 D 键 · 32 Android D 键（亦为空格键）
  ["RIGHT", { codes: ["ArrowRight", 68, 22, 32, 39], preventDefault: true, callback: null }],
  // 13 回车 · 23 Android 确定键 · 66 Android 回车键 · 73、1 沿用自 vue-epg
  [
    "ENTER",
    { codes: ["Enter", "NumpadEnter", 13, 73, 66, 23, 1], preventDefault: true, callback: null },
  ],
  // 8 退格 · 27 Esc · 4 Android 返回键 · 10009 Tizen 返回键 · 461 webOS 返回键
  [
    "BACK",
    {
      codes: ["Backspace", "Escape", 4, 27, 8, 10009, 461],
      preventDefault: true,
      callback: null,
    },
  ],
  ["PAGE", { codes: ["PageUp", "PageDown", 33, 34], preventDefault: true, callback: null }],
  [
    "NUMBER",
    {
      // prettier-ignore
      codes: [
        "Digit0", "Digit1", "Digit2", "Digit3", "Digit4",
        "Digit5", "Digit6", "Digit7", "Digit8", "Digit9",
        "Numpad0", "Numpad1", "Numpad2", "Numpad3", "Numpad4",
        "Numpad5", "Numpad6", "Numpad7", "Numpad8", "Numpad9",
        48, 49, 50, 51, 52, 53, 54, 55, 56, 57,
        96, 97, 98, 99, 100, 101, 102, 103, 104, 105,
      ],
      preventDefault: false,
      callback: null,
    },
  ],
]);

Action	Built-in behavior
UP / DOWN / LEFT / RIGHT	Move focus; see Navigation
ENTER	Invoke the current element's click()
BACK	Invoke Back handling
PAGE / NUMBER	None; supply your own callback

The six built-in actions cannot be removed. Their codes, preventDefault and callback can change. Callbacks run after the built-in behavior.

How keys are identified

Read event.code, then event.which, then event.keyCode. A missing, empty or "Unidentified" code falls back to numeric values. Modern browsers normally match code strings; legacy set-top boxes may provide only numbers. Add both string and numeric codes for a portable mapping.

For text input, textarea, select and editable content, vuEPG leaves text, Backspace and left/right keys to the browser. Up/down, Escape and remote Back still use vuEPG. Listen on the input element for other custom keys.

Inspect codes on your device:

document.addEventListener("keydown", (event) => {
  console.log(event.code, event.which, event.keyCode);
});

Customize actions

const epg = useVuEPG();

// Add: M or remote Menu (82) opens the menu
epg.setKeyAction("MENU", {
  codes: ["KeyM", 82],
  preventDefault: true,
  callback: (code, event) => openMenu(),
});

// Update selected fields
epg.updateKeyAction("NUMBER", {
  preventDefault: true,
  callback: (code) => jumpToChannel(code),
});

// Append / remove keys for an action
epg.addKeyCodes("ENTER", ["Space", 32]);
epg.removeKeyCodes("UP", [87]);

// Remove a custom action
epg.removeKeyAction("MENU");

// Read all current actions (read-only snapshot)
console.log(epg.getKeyActions());

Updating nonexistent actions or removing a built-in action throws an error.

Pause input

Temporarily hand input to native text entry or fullscreen playback:

const releasePause = epg.pause();
releasePause(); // Release only this pause
epg.resume(); // Clear all outstanding pauses
epg.isPaused(); // boolean

Keep and call each pause holder's release function. Input resumes when all holds have been released. While paused, vuEPG does not call preventDefault().