Autocorrect - simple-keyboard

Module: Autocorrect

Autocorrects entered input through a user-specified wordlist.

Installation

npm install simple-keyboard simple-keyboard-autocorrect --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 autocorrect from "simple-keyboard-autocorrect";
3 
4// CSS
5import 'simple-keyboard/build/css/index.css';
6 
7const wordList = ["my", "word", "list"];
8 
9const keyboard = new Keyboard({
10  onChange: input => onChange(input),
11  onKeyPress: button => onKeyPress(button),
12  autocorrectDict: wordList,
13  autocorrectHotkey: "{space}",
14  modules: [
15    autocorrect
16  ]
17});
18 
19function onChange(input){
20  document.querySelector(".input").value = input;
21  console.log("Input changed", input);
22}
23 
24function onKeyPress(button){
25  console.log("Button pressed", button);
26}

1<input class="input" />
2<div class="simple-keyboard">

Demos: JS (angular + vue)

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="simple-keyboard"></div>
9 
10  <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.min.js"></script>
11  <script src="https://cdn.jsdelivr.net/npm/simple-keyboard-autocorrect@latest/build/index.min.js"></script>
12  <script src="src/index.js"></script>
13</body>
14</html>

1const Keyboard = window.SimpleKeyboard.default;
2const autocorrect = window.SimpleKeyboardAutocorrect.default;
3 
4const wordList = ["my", "word", "list"];
5 
6const keyboard = new Keyboard({
7  onChange: input => onChange(input),
8  onKeyPress: button => onKeyPress(button),
9  autocorrectDict: wordList,
10  autocorrectHotkey: "{space}",
11  modules: [
12    autocorrect
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}

Demos: JS (cdn)