Layouts - simple-keyboard - Francisco Hodge

Module: simple-keyboard-layouts

Change the language of your simple-keyboard keys easily.

View supported languages View the source on Github

Installation

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

1import Keyboard from 'simple-keyboard';
2import 'simple-keyboard/build/css/index.css';
3 
4/**
5 * Available layouts
6 * https://github.com/hodgef/simple-keyboard-layouts/tree/master/src/lib/layouts
7 */
8import layout from "simple-keyboard-layouts/build/layouts/japanese";
9 
10const keyboard = new Keyboard({
11  onChange: input => onChange(input),
12  onKeyPress: button => onKeyPress(button),
13  ...layout
14});
15 
16function onChange(input){
17  document.querySelector(".input").value = input;
18  console.log("Input changed", input);
19}
20 
21function onKeyPress(button){
22  console.log("Button pressed", button);
23}

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

Demos: JS (npm)

Usage with CDN

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

1const Keyboard = window.SimpleKeyboard.default;
2const KeyboardLayouts = window.SimpleKeyboardLayouts.default;
3 
4/**
5 * Available layouts
6 * https://github.com/hodgef/simple-keyboard-layouts/tree/master/src/lib/layouts
7 */
8const layout = new KeyboardLayouts().get("japanese");
9 
10const myKeyboard = new Keyboard({
11  onChange: input => onChange(input),
12  onKeyPress: button => onKeyPress(button),
13  ...layout
14});
15 
16function onChange(input) {
17  document.querySelector(".input").value = input;
18  console.log("Input changed", input);
19}
20 
21function onKeyPress(button) {
22  console.log("Button pressed", button);
23}

Demos: JS (cdn)

Options and customization

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

Click here to browse the documentation