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

simple-keyboard-layouts

1.2.4 • Public • Published

npm version Build Status

The keyboard layout kit for simple-keyboard.

Layouts supported

simple-keyboard-layouts supports a wide range of languages and other layouts.

Click here for the full list of supported layouts

Installation

npm

Make sure to install simple-keyboard as a first step. Then:

npm install simple-keyboard-layouts --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 'simple-keyboard/build/css/index.css';
 
/**
 * Available layouts
 * https://github.com/hodgef/simple-keyboard-layouts/tree/master/src/lib/layouts
 */
import layout from "simple-keyboard-layouts/build/layouts/japanese";
 
let keyboard = new Keyboard({
  onChange: input => onChange(input),
  onKeyPress: button => onKeyPress(button),
  layout: layout
});
 
function onChange(input){
  document.querySelector(".input").value = input;
  console.log("Input changed", input);
}
 
function onKeyPress(button){
  console.log("Button pressed", button);
}

html

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

Usage with CDN

html

<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@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-layouts@latest/build/index.min.js"></script> 
  <script src="src/index.js"></script> 
</body>
 
</html>

js (index.js)

let Keyboard = window.SimpleKeyboard.default;
let KeyboardLayouts = window.SimpleKeyboardLayouts.default;
 
/**
 * Available layouts
 * https://github.com/hodgef/simple-keyboard-layouts/tree/master/src/lib/layouts
 */
let layout = new KeyboardLayouts().get("japanese");
 
let myKeyboard = new Keyboard({
  onChange: input => onChange(input),
  onKeyPress: button => onKeyPress(button),
  layout: layout
});
 
function onChange(input) {
  document.querySelector(".input").value = input;
  console.log("Input changed", input);
}
 
function onKeyPress(button) {
  console.log("Button pressed", button);
}

Options and Customization

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

install

npm i simple-keyboard-layouts

Downloadsweekly downloads

93

version

1.2.4

license

MIT

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability