npm version bump

Updating README cdn usage example
Update build
2026-02-03 00:06:50 +08:00 · 2018-06-08 10:40:30 -04:00 · 2018-06-08 10:39:20 -04:00 · 2018-06-08 10:28:50 -04:00 · 2018-06-08 10:15:21 -04:00 · 2018-06-08 09:57:53 -04:00
7 changed files with 124 additions and 58 deletions
--- a/README.md
+++ b/README.md
@@ -2,14 +2,10 @@

 [![npm](https://img.shields.io/npm/v/simple-keyboard.svg)](https://www.npmjs.com/package/simple-keyboard)

-<a href="https://franciscohodge.com/projects/simple-keyboard/"><img src="src/demo/images/simple-keyboard.png" align="center"></a>
-> An easily customisable and responsive on-screen virtual keyboard for Javascript projects.
+<a href="https://franciscohodge.com/projects/simple-keyboard/"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard.png" align="center"></a>
+> The easily customisable and responsive on-screen virtual keyboard for Javascript projects.

-> Want the React.js version? Get [react-simple-keyboard](https://www.npmjs.com/package/react-simple-keyboard) instead!
-
-<img src="src/demo/images/keyboard.PNG" align="center" width="100%">
-
-<b>[Live Demo](https://franciscohodge.com/simple-keyboard/demo)</b>
+<img src="https://franciscohodge.com/project-pages/simple-keyboard/images/keyboard.png" align="center" width="100%">


 ## Installation
@@ -32,36 +28,30 @@
 import Keyboard from 'simple-keyboard';
 import 'simple-keyboard/build/css/index.css';

-class App {
-  constructor(){
-    document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
-  }
+let keyboard = new Keyboard({
+  onChange: input => this.onChange(input),
+  onKeyPress: button => this.onKeyPress(button)
+});

-  onDOMLoaded = () => {
-    this.keyboard = new Keyboard({
-      onChange: input => this.onChange(input),
-      onKeyPress: button => this.onKeyPress(button)
-    });
-  }
-
-  onChange = input => {
-    console.log("Input changed", input);
-  }
-
-  onKeyPress = button => {
-    console.log("Button pressed", button);
-  }
+function onChange(input){
+  document.querySelector(".input").value = input;
+  console.log("Input changed", input);
 }

-export default App;
+function onKeyPress(button){
+  console.log("Button pressed", button);
+}
 ````

 ### html

 ````html
+<input class="input" />
 <div class="simple-keyboard"></div>
 ````

+[![Edit krzkx19rr](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/krzkx19rr)
+
 > Need a more extensive example? [Click here](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/App.js).

 ## Usage from CDN
@@ -69,32 +59,44 @@ export default App;
 ### html

 ````html
-<!DOCTYPE html>
-<html lang="en">
+<html>
 <head>
-    <link rel="stylesheet" href="https://cdn.rawgit.com/hodgef/simple-keyboard/d477c35c/build/css/index.css">
+  <link rel="stylesheet" href="https://cdn.rawgit.com/hodgef/simple-keyboard/d477c35c/build/css/index.css">
 </head>
+
 <body>
-    <div class="simple-keyboard"></div>
-    <script src="https://cdn.rawgit.com/hodgef/simple-keyboard/d477c35c/build/index.js"></script>
-    <script>
-      function keyboard_onChange(input){
-        console.log("Input changed", input);
-      }
+  <input class="input" placeholder="Tap on the virtual keyboard to start" />
+  <div class="simple-keyboard"></div>

-      function keyboard_onKeyPress(button){
-        console.log("Button pressed", button);
-      }
-
-      var myKeyboard = new Keyboard({
-        onChange: input => keyboard_onChange(input),
-        onKeyPress: button => keyboard_onKeyPress(button)
-      });
-    </script>
+  <script src="https://cdn.rawgit.com/hodgef/simple-keyboard/3b75d11b9c1d782d92103d1df0970734e6d6df83/build/index.js"></script>
+  <script src="src/index.js"></script>
 </body>
+
 </html>
 ````

+### js (index.js)
+
+````js
+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);
+}
+````
+
+[![Edit 6n0wzxjmjk](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6n0wzxjmjk)
+
 ## Options

 You can customize the Keyboard by passing options to it.
@@ -181,6 +183,30 @@ newLineOnEnter: false
 inputName: "default"
 ```

+### onKeyPress
+
+> Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
+
+```js
+onKeyPress: (button) => console.log(button)
+```
+
+### onChange
+
+> Executes the callback function on input change. Returns the current input's string.
+
+```js
+onChange: (input) => console.log(input)
+```
+
+### onChangeAll
+
+> 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](#using-several-inputs)*" guide.
+
+```js
+onChangeAll: (inputs) => console.log(inputs)
+```
+
 ## Methods

 simple-keyboard has a few methods you can use to further control it's behavior.
@@ -201,7 +227,12 @@ keyboard.methodName(params);
 > Clear the keyboard's input.

 ```js
+// 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");
 ```

 ### getInput
@@ -209,7 +240,12 @@ keyboard.clearInput();
 > Get the keyboard's input (You can also get it from the _onChange_ prop).

 ```js
+// 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");
 ```

 ### setInput
@@ -217,7 +253,12 @@ let input = keyboard.getInput();
 > Set the keyboard's input. Useful if you want the keybord to initialize with a default value, for example.

 ```js
+// 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");
 ```

 ### setOptions
@@ -237,40 +278,63 @@ keyboard.setOptions({
 Set the *[inputName](#inputname)* option for each input you want to handle with simple-keyboard.

 For example:
+
 ```html
  <input class="input" id="input1" value=""/>
  <input class="input" id="input2" value=""/>
 ```

 ```js
+  // 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 => console.log(input),
-    onKeyPress: button => console.log(button),
+    onChange: input => onChange(input)
  });

  // Add an event listener for the inputs to be tracked
  document.querySelectorAll('.input')
    .forEach(input => input.addEventListener('focus', onInputFocus));

-  // Set the inputName option on the fly !
-  function onInputFocus(event){
+  /**
+   * 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;
+  }
+
 ```

-[Using several inputs](#using-several-inputs)
+> [See full example](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/MultipleInputsDemo.js).

 ## Demo

-<img src="src/demo/images/demo.gif" align="center" width="600">
-
-### Live demo
+<img src="https://franciscohodge.com/project-pages/simple-keyboard/images/demo.gif" align="center" width="600">

 [https://franciscohodge.com/simple-keyboard/demo](https://franciscohodge.com/simple-keyboard/demo)

+[![Edit krzkx19rr](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/krzkx19rr)
+
 ### To run demo on your own computer

 * Clone this repository
--- a/build/index.js
+++ b/build/index.js
--- a/build/index.js.map
+++ b/build/index.js.map
--- a/config/webpack.config.demo.js
+++ b/config/webpack.config.demo.js
@@ -60,7 +60,8 @@ module.exports = {
    // CRL: Updated whole block with library specific info
    path: paths.appDemoBuild,
    filename: 'index.js',
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    library: 'SimpleKeyboard'
  },
  resolve: {
    // This allows you to set a fallback for where Webpack should look for modules.
--- a/config/webpack.config.prod.js
+++ b/config/webpack.config.prod.js
@@ -57,7 +57,8 @@ module.exports = {
    // CRL: Updated whole block with library specific info
    path: paths.appBuild,
    filename: 'index.js',
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    library: 'SimpleKeyboard'
  },
  resolve: {
    // This allows you to set a fallback for where Webpack should look for modules.
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-keyboard",
-  "version": "2.0.0",
+  "version": "2.1.5",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "simple-keyboard",
-  "version": "2.1.0",
+  "version": "2.2.0",
  "description": "On-screen Virtual Keyboard",
  "main": "build/index.js",
  "scripts": {
Author	SHA1	Message	Date
Francisco Hodge	b2df5cf09e	npm version bump	2018-06-08 10:40:30 -04:00
Francisco Hodge	10bbcdd89c	Updating README cdn usage example	2018-06-08 10:39:20 -04:00
Francisco Hodge	3b75d11b9c	Update build	2018-06-08 10:28:50 -04:00
Francisco Hodge	71136a0d5e	Webpack config adjustment	2018-06-08 10:15:21 -04:00
Francisco Hodge	1aafdeee0a	npm bump	2018-06-08 09:57:53 -04:00
Francisco Hodge	41c87430ff	npm bump	2018-05-30 23:16:41 -04:00
Francisco Hodge	ff2476a331	README typo fix	2018-05-30 23:15:01 -04:00
Francisco Hodge	894483e6a7	Adding editable CodeSandbox examples	2018-05-30 22:28:51 -04:00
Francisco Hodge	cbef48eb3c	npm version bump	2018-05-02 13:01:16 -04:00
Francisco Hodge	2769002ff6	Adding further comments on multiple input example	2018-05-02 12:41:29 -04:00
Francisco Hodge	04088f63c1	Fix image path	2018-04-30 15:33:15 -04:00
Francisco Hodge	69ed611788	Bump npm version	2018-04-30 12:47:31 -04:00
Francisco Hodge	dbed641621	Updating documentation	2018-04-30 12:47:18 -04:00
Francisco Hodge	d1e6630247	README cleanup	2018-04-30 11:11:31 -04:00