simple-keyboard
Advanced tools
The easily customisable and responsive on-screen virtual keyboard for Javascript projects.
npm install simple-keyboard --save
Click here to download the latest release (zip format).
Want to use a CDN instead of self-host? Scroll down to the "Usage from CDN" instructions below.
import Keyboard from 'simple-keyboard';
import 'simple-keyboard/build/css/index.css';
let keyboard = new Keyboard({
onChange: input => this.onChange(input),
onKeyPress: button => this.onKeyPress(button)
});
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>
Need a more extensive example? Click here.
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/hodgef/simple-keyboard/d477c35c/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.rawgit.com/hodgef/simple-keyboard/3b75d11b9c1d782d92103d1df0970734e6d6df83/build/index.js"></script>
<script src="src/index.js"></script>
</body>
</html>
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);
}
You can customize the Keyboard by passing options to it. Here are the available options (the code examples are the defaults):
Modify the keyboard layout
layout: {
'default': [
'` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
'{tab} q w e r t y u i o p [ ] \\',
'{lock} a s d f g h j k l ; \' {enter}',
'{shift} z x c v b n m , . / {shift}',
'.com @ {space}'
],
'shift': [
'~ ! @ # $ % ^ & * ( ) _ + {bksp}',
'{tab} Q W E R T Y U I O P { } |',
'{lock} A S D F G H J K L : " {enter}',
'{shift} Z X C V B N M < > ? {shift}',
'.com @ {space}'
]
}
Specifies which layout should be used.
layoutName: "default"
Replaces variable buttons (such as
{bksp}) with a human-friendly name (e.g.: "delete").
display: {
'{bksp}': 'delete',
'{enter}': '< enter',
'{shift}': 'shift',
'{s}': 'shift',
'{tab}': 'tab',
'{lock}': 'caps',
'{accept}': 'Submit',
'{space}': ' ',
'{//}': ' '
}
A prop to add your own css classes. You can add multiple classes separated by a space.
theme: "hg-theme-default"
Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
debug: false
Specifies whether clicking the "ENTER" button will input a newline (
\n) or not.
newLineOnEnter: false
Allows you to use a single simple-keyboard instance for several inputs.
inputName: "default"
Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
onKeyPress: (button) => console.log(button)
Executes the callback function on input change. Returns the current input's string.
onChange: (input) => console.log(input)
Executes the callback function on input change. Returns the input object with all defined inputs. This is useful if you're handling several inputs with simple-keyboard, as specified in the "Using several inputs" guide.
onChangeAll: (inputs) => console.log(inputs)
simple-keyboard has a few methods you can use to further control it's behavior. To access these functions, you need the instance the simple-keyboard component, like so:
var keyboard = new Keyboard({
...
});
/>
// Then, use as follows...
keyboard.methodName(params);
Clear the keyboard's input.
// For default input (i.e. if you have only one)
keyboard.clearInput();
// For specific input
// Must have been previously set using the "inputName" prop.
keyboard.clearInput("inputName");
Get the keyboard's input (You can also get it from the onChange prop).
// For default input (i.e. if you have only one)
let input = keyboard.getInput();
// For specific input
// Must have been previously set using the "inputName" prop.
let input = keyboard.getInput("inputName");
Set the keyboard's input. Useful if you want the keybord to initialize with a default value, for example.
// For default input (i.e. if you have only one)
keyboard.setInput("Hello World!");
// For specific input
// Must have been previously set using the "inputName" prop.
keyboard.setInput("Hello World!", "inputName");
Set new option or modify existing ones after initialization. The changes are applied immediately.
keyboard.setOptions({
theme: "my-custom-theme"
});
Set the inputName option for each input you want to handle with simple-keyboard.
For example:
<input class="input" id="input1" value=""/>
<input class="input" id="input2" value=""/>
// Here we'll store the input id that simple-keyboard will be using.
var selectedInput;
// Initialize simple-keyboard as usual
var keyboard = new Keyboard({
onChange: input => onChange(input)
});
// Add an event listener for the inputs to be tracked
document.querySelectorAll('.input')
.forEach(input => input.addEventListener('focus', onInputFocus));
/**
* When an input is focused, it will be marked as selected (selectedInput)
* This is so we can replace it's value on the onChange function
*
* Also, we will set the inputName option to a unique string identifying the input (id)
* simple-keyboard save the input in this key and report changes through onChange
*/
onInputFocus = event => {
// Setting input as selected
selectedInput = `#${event.target.id}`;
// Set the inputName option on the fly !
keyboard.setOptions({
inputName: event.target.id
});
}
// When the current input is changed, this is called
onChange = input => {
// If the input is not defined, grabbing the first ".input".
let currentInput = selectedInput || '.input';
// Updating the selected input's value
document.querySelector(currentInput).value = input;
}
https://franciscohodge.com/simple-keyboard/demo
npm installnpm startPR's and issues are welcome. Feel free to submit any issues you have at: https://github.com/hodgef/simple-keyboard/issues
FAQs
On-screen Javascript Virtual Keyboard
The npm package simple-keyboard receives a total of 24,609 weekly downloads. As such, simple-keyboard popularity was classified as popular.
We found that simple-keyboard demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.