Adding further comments on multiple input example

This commit is contained in:
Francisco Hodge 2018-05-02 12:41:29 -04:00
parent 04088f63c1
commit 2769002ff6
2 changed files with 29 additions and 5 deletions

View File

@ -276,29 +276,53 @@ keyboard.setOptions({
Set the *[inputName](#inputname)* option for each input you want to handle with simple-keyboard. Set the *[inputName](#inputname)* option for each input you want to handle with simple-keyboard.
For example: For example:
```html ```html
<input class="input" id="input1" value=""/> <input class="input" id="input1" value=""/>
<input class="input" id="input2" value=""/> <input class="input" id="input2" value=""/>
``` ```
```js ```js
// Here we'll store the input id that simple-keyboard will be using.
var selectedInput;
// Initialize simple-keyboard as usual // Initialize simple-keyboard as usual
var keyboard = new Keyboard({ var keyboard = new Keyboard({
onChange: input => console.log(input), onChange: input => onChange(input)
onKeyPress: button => console.log(button)
}); });
// Add an event listener for the inputs to be tracked // Add an event listener for the inputs to be tracked
document.querySelectorAll('.input') document.querySelectorAll('.input')
.forEach(input => input.addEventListener('focus', onInputFocus)); .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({ keyboard.setOptions({
inputName: event.target.id 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). > [See full example](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/MultipleInputsDemo.js).
## Demo ## Demo

View File

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