Swype type keyboard module for simple-keyboard
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
bin first commit Oct 31, 2018
build
config 1.2.0 - Webpack 4, Babel 7 Nov 9, 2018
public
scripts
src npm update Nov 5, 2018
.gitignore 1.2.0 - Webpack 4, Babel 7 Nov 9, 2018
.npmignore
.travis.yml
LICENSE first commit Oct 31, 2018
README.md
package-lock.json
package.json Updated dev dependencies Feb 9, 2019

README.md

Swype keyboard for Javascript projects (non-predictive)

Build Status

Installation

npm

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

import Keyboard from 'simple-keyboard';
import swipe from 'swipe-keyboard';

// CSS
import 'simple-keyboard/build/css/index.css';
import 'swipe-keyboard/build/css/index.css';

let keyboard = new Keyboard({
  onChange: input => onChange(input),
  onKeyPress: button => onKeyPress(button),
  modules: [
    swipe
  ]
});

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="keyboardContainer">
  <div class="simple-keyboard"></div>
</div>

Usage with CDN

html

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swipe-keyboard@latest/build/css/index.css">
</head>

<body>
  <input class="input" />
  <div class="keyboardContainer">
    <div class="simple-keyboard"></div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/swipe-keyboard@latest/build/index.min.js"></script>
  <script src="src/index.js"></script>
</body>

</html>

js (index.js)

let Keyboard = window.SimpleKeyboard.default;
let swipe = window.SimpleKeyboardSwipe.default;

let keyboard = new Keyboard({
  onChange: input => onChange(input),
  onKeyPress: button => onKeyPress(button),
  modules: [
    swipe
  ]
});

function onChange(input){
  document.querySelector(".input").value = input;
  console.log("Input changed", input);
}

function onKeyPress(button){
  console.log("Button pressed", button);
}

Enabling Autocorrect

You can add autocorrect functionality by installing the Autocorrect module for simple-keyboard.

Options and Customization

To fully customize your virtual keyboard, check out the main simple-keyboard repository: