I have developed a unique Vue component for touch screen devices that allows users to input pin codes using buttons instead of standard keyboard input. The component also features customizable key mapping, and I would like to extend its functionality to support keyboard input on desktop devices.
However, I am facing an issue where multiple instances of the pin code input component are mounted on the page, resulting in keystrokes being registered by all components simultaneously.
I am currently exploring options to ensure that only the focused component receives keyboard input, while maintaining seamless button functionality on touch screens.
...
data() {
return {
value: '',
keys: [
{ name: '9', code: 'Digit9'},
{ name: '8', code: 'Digit8'},
{ name: '7', code: 'Digit7'},
{ name: '6', code: 'Digit6'},
{ name: '5', code: 'Digit5'},
{ name: '4', code: 'Digit4'},
{ name: '3', code: 'Digit3'},
{ name: '2', code: 'Digit2'},
{ name: '1', code: 'Digit1'},
{ name: '0', code: 'Digit0'},
]
};
},
mounted() {
window.addEventListener("keypress", e => {
let result = _.find(this.keys, ['code', e.code]); // Lodash
if (result) this.value = "" + this.value + result.name;
});
}
...
https://i.sstatic.net/kZhWJ.png
Thank you for your assistance.