Key Navigation - simple-keyboard

Module: Key Navigation

Provides the ability to navigate simple-keyboard programmatically.

Installation

npm install simple-keyboard simple-keyboard-key-navigation --save

zip file (self-hosted)

Click here to download the latest release (zip format).

Want to use a CDN instead of self-host? Scroll down to the “Usage with CDN” instructions below.

Usage with npm

1import Keyboard from "simple-keyboard";
2import keyNavigation from "simple-keyboard-key-navigation";
3 
4import "simple-keyboard/build/css/index.css";
5 
6const keyboard = new Keyboard({
7  onChange: input => onChange(input),
8  onKeyPress: button => onKeyPress(button),
9  useMouseEvents: true,
10  enableKeyNavigation: true,
11  modules: [
12    keyNavigation
13  ],
14  onModulesLoaded: keyboard => {
15   /**
16    * Optional: If keyboard.modules is not available below.
17    * You can call module methods here
18    * e.g: keyboard.modules.keyNavigation.up();
19    * etc.
20    */
21  }
22});
23 
24function onChange(input){
25  document.querySelector(".input").value = input;
26  console.log("Input changed", input);
27}
28 
29function onKeyPress(button){
30  console.log("Button pressed", button);
31}
32 
33/**
34 * To select the keys using the physical keyboard
35 */
36document.addEventListener(
37  "keydown",
38  e => {
39    if (e.key === "ArrowUp") keyboard.modules.keyNavigation.up();
40    else if (e.key === "ArrowDown") keyboard.modules.keyNavigation.down();
41    else if (e.key === "ArrowLeft") keyboard.modules.keyNavigation.left();
42    else if (e.key === "ArrowRight") keyboard.modules.keyNavigation.right();
43    else if (e.key === "Enter") keyboard.modules.keyNavigation.press();
44  },
45  false
46);

1<input class="input" />
2<div class="simple-keyboard"></div>

Demos: JS (npm) react

Usage with CDN

1<html>
2<head>
3  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
4</head>
5 
6<body>
7  <input class="input" />
8  <div class="simple-keyboard"></div>
9 
10  <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.min.js"></script>
11  <script src="https://cdn.jsdelivr.net/npm/simple-keyboard-key-navigation@latest/build/index.min.js"></script>
12  <script src="src/index.js"></script>
13</body>
14</html>

1const Keyboard = window.SimpleKeyboard.default;
2const keyNavigation = window.SimpleKeyboardKeyNavigation.default;
3 
4const keyboard = new Keyboard({
5  onChange: input => onChange(input),
6  onKeyPress: button => onKeyPress(button),
7  useMouseEvents: true,
8  enableKeyNavigation: true,
9  modules: [
10    keyNavigation
11  ],
12  onModulesLoaded: keyboard => {
13   /**
14    * Optional: If keyboard.modules is not available below.
15    * You can call module methods here
16    * e.g: keyboard.modules.keyNavigation.up();
17    * etc.
18    */
19  }
20});
21 
22function onChange(input){
23  document.querySelector(".input").value = input;
24  console.log("Input changed", input);
25}
26 
27function onKeyPress(button){
28  console.log("Button pressed", button);
29}
30 
31/**
32 * To select the keys using the physical keyboard
33 */
34document.addEventListener(
35  "keydown",
36  e => {
37    if (e.key === "ArrowUp") keyboard.modules.keyNavigation.up();
38    else if (e.key === "ArrowDown") keyboard.modules.keyNavigation.down();
39    else if (e.key === "ArrowLeft") keyboard.modules.keyNavigation.left();
40    else if (e.key === "ArrowRight") keyboard.modules.keyNavigation.right();
41    else if (e.key === "Enter") keyboard.modules.keyNavigation.press();
42  },
43  false
44);

Demos: JS (cdn)