simple-keyboard - npm Package Compare versions

Comparing version 2.1.3 to 2.1.4

package.json

 {
   "name": "simple-keyboard",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "On-screen Virtual Keyboard",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

@@ -279,2 +279,3 @@ # simple-keyboard
 For example:
+
 ```html
@@ -286,6 +287,8 @@ <input class="input" id="input1" 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)
   });
@@ -297,4 +300,14 @@
 
-  // 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({
@@ -304,3 +317,14 @@ 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;
+  }
+
 ```
+
 > [See full example](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/MultipleInputsDemo.js).
@@ -307,0 +331,0 @@

No alert changes

Improved metrics

Total package byte prevSize

601455

increased by0.13%

Number of lines in readme file

347

increased by7.43%

No dependency changes