The keyboard layout kit for simple-keyboard.
simple-keyboard-layouts supports a wide range of languages and other layouts.
Click here for the full list of supported layouts
Make sure to install simple-keyboard as a first step. Then:
npm install simple-keyboard-layouts --save
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.
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);
}<input class="input" />
<div class="simple-keyboard"></div>
<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>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);
}To fully customize your virtual keyboard, check out the main simple-keyboard repository:
