Installation
npm
npm install simple-keyboard --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
js
import Keyboard from 'simple-keyboard';
import 'simple-keyboard/build/css/index.css';
let keyboard = new Keyboard({
onChange: input => onChange(input),
onKeyPress: button => onKeyPress(button)
});
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>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/css/index.css">
</head>
<body>
<input class="input" placeholder="Tap on the virtual keyboard to start" />
<div class="simple-keyboard"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/index.min.js"></script>
<script src="src/index.js"></script>
</body>
</html>js
let Keyboard = window.SimpleKeyboard.default;
let myKeyboard = new Keyboard({
onChange: input => onChange(input),
onKeyPress: button => onKeyPress(button)
});
function onChange(input) {
document.querySelector(".input").value = input;
console.log("Input changed", input);
}
function onKeyPress(button) {
console.log("Button pressed", button);
}
To learn more about the different options and methods, check out the documentation