Nanometers Per Millisecond
Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

simple-keyboard-key-navigation

1.1.2 • Public • Published

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:

install

npm i simple-keyboard-key-navigation

Downloadsweekly downloads

19

version

1.1.2

license

MIT

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability