Swipe Keyboard - simple-keyboard

This is an experimental module. Contributions to the repository are welcome !

Module: swipe-keyboard

Allows to enter input through swiping over the buttons (like a Swype keyboard, but more simplistic).

Installation

npm install simple-keyboard swipe-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

1import Keyboard from 'simple-keyboard';
2import swipe from 'swipe-keyboard';
3 
4// CSS
5import 'simple-keyboard/build/css/index.css';
6 
7const keyboard = new Keyboard({
8  onChange: input => onChange(input),
9  onKeyPress: button => onKeyPress(button),
10  useMouseEvents: true,
11  modules: [
12    swipe
13  ]
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="keyboardContainer">
3  <div class="simple-keyboard"></div>
4</div>

Demos: JS (npm)

Usage with CDN

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

1const Keyboard = window.SimpleKeyboard.default;
2const swipe = window.SimpleKeyboardSwipe.default;
3 
4const keyboard = new Keyboard({
5  onChange: input => onChange(input),
6  onKeyPress: button => onKeyPress(button),
7  useMouseEvents: true,
8  modules: [
9    swipe
10  ]
11});
12 
13function onChange(input){
14  document.querySelector(".input").value = input;
15  console.log("Input changed", input);
16}
17 
18function onKeyPress(button){
19  console.log("Button pressed", button);
20}

Demos: JS (cdn)