mirror of
https://github.com/hodgef/simple-keyboard.git
synced 2025-03-16 08:21:07 +08:00
Adding further comments on multiple input example
This commit is contained in:
parent
04088f63c1
commit
2769002ff6
32
README.md
32
README.md
@ -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
|
||||||
|
@ -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": {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user