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": {