Getting Started
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
JavaScript
1import Keyboard from 'simple-keyboard';2import 'simple-keyboard/build/css/index.css';3 4const keyboard = new Keyboard({5 onChange: input => onChange(input),6 onKeyPress: button => onKeyPress(button)7});8 9function onChange(input){10 document.querySelector(".input").value = input;11 console.log("Input changed", input);12}13 14function onKeyPress(button){15 console.log("Button pressed", button);16}HTML
1<input class="input" />2<div class="simple-keyboard"></div>HTML
1<html>2<head>3 <link rel="stylesheet" href="https://unpkg.com/simple-keyboard@latest/build/css/index.css">4</head>5 6<body>7 <input class="input" placeholder="Tap on the virtual keyboard to start" />8 <div class="simple-keyboard"></div>9 10 <script src="https://unpkg.com/simple-keyboard@latest/build/index.js"></script>11 <script src="src/index.js"></script>12</body>13</html>JavaScript
1const Keyboard = window.SimpleKeyboard.default;2 3const myKeyboard = new Keyboard({4 onChange: input => onChange(input),5 onKeyPress: button => onKeyPress(button)6});7 8function onChange(input) {9 document.querySelector(".input").value = input;10 console.log("Input changed", input);11}12 13function onKeyPress(button) {14 console.log("Button pressed", button);15}
