diff --git a/README.md b/README.md
index 6bc4dfea..63f5f4d6 100644
--- a/README.md
+++ b/README.md
@@ -276,29 +276,53 @@ keyboard.setOptions({
Set the *[inputName](#inputname)* option for each input you want to handle with simple-keyboard.
For example:
+
```html
```
```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;
+ }
+
```
+
> [See full example](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/MultipleInputsDemo.js).
## Demo
diff --git a/package.json b/package.json
index 171cdfbd..3ffd1521 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "simple-keyboard",
- "version": "2.1.3",
+ "version": "2.1.4",
"description": "On-screen Virtual Keyboard",
"main": "build/index.js",
"scripts": {