Key navigation module for simple-keyboard
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin
build
config
public Initial commit Nov 7, 2018
scripts
src
.gitignore
.npmignore
.travis.yml
LICENSE
README.md
package-lock.json
package.json npm update Jan 6, 2019

README.md

Select simple-keyboard keys without needing a mouse or touch screen.

Build Status

Installation

npm

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

import Keyboard from "simple-keyboard";
import keyNavigation from "simple-keyboard-key-navigation";

import "simple-keyboard/build/css/index.css";
import "simple-keyboard-key-navigation/build/css/index.css";

let keyboard = new Keyboard({
  onChange: input => onChange(input),
  onKeyPress: button => onKeyPress(button),
  enableKeyNavigation: true,
  modules: [
    keyNavigation
  ]
});

function onChange(input){
  document.querySelector(".input").value = input;
  console.log("Input changed", input);
}

function onKeyPress(button){
  console.log("Button pressed", button);
}

/**
 * To select the keys using the physical keyboard
 */
document.addEventListener(
  "keydown",
  e => {
    if (e.key === "ArrowUp") keyboard.modules.keyNavigation.up();
    else if (e.key === "ArrowDown") keyboard.modules.keyNavigation.down();
    else if (e.key === "ArrowLeft") keyboard.modules.keyNavigation.left();
    else if (e.key === "ArrowRight") keyboard.modules.keyNavigation.right();
    else if (e.key === "Enter") keyboard.modules.keyNavigation.press();
  },
  false
);

html

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

Usage with CDN

html

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard-key-navigation@latest/build/css/index.css">
</head>

<body>
  <input class="input" />
  <div class="simple-keyboard"></div>

  <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/simple-keyboard-key-navigation@latest/build/index.min.js"></script>
  <script src="src/index.js"></script>
</body>

</html>

js (index.js)

let Keyboard = window.SimpleKeyboard.default;
let keyNavigation = window.SimpleKeyboardKeyNavigation.default;

let keyboard = new Keyboard({
  onChange: input => onChange(input),
  onKeyPress: button => onKeyPress(button),
  enableKeyNavigation: true,
  modules: [
    keyNavigation
  ]
});

function onChange(input){
  document.querySelector(".input").value = input;
  console.log("Input changed", input);
}

function onKeyPress(button){
  console.log("Button pressed", button);
}

/**
 * To select the keys using the physical keyboard
 */
document.addEventListener(
  "keydown",
  e => {
    if (e.key === "ArrowUp") keyboard.modules.keyNavigation.up();
    else if (e.key === "ArrowDown") keyboard.modules.keyNavigation.down();
    else if (e.key === "ArrowLeft") keyboard.modules.keyNavigation.left();
    else if (e.key === "ArrowRight") keyboard.modules.keyNavigation.right();
    else if (e.key === "Enter") keyboard.modules.keyNavigation.press();
  },
  false
);

Options and Customization

To fully customize your virtual keyboard, check out the main simple-keyboard repository: