In the process of developing a web application using Vue.js, I encountered an issue with detecting long presses of the Backspace key on desktop keyboards (Windows PCs specifically). On desktop, the event triggers multiple times as long as the Backspace key is held down. However, on mobile devices, it only fires once even if the Backspace key is held for an extended period.
My goal is to have the focus shift to the previous field when all text is cleared from the current field, and eventually have the cursor move to the first field once all fields are empty.
While I've managed to address this on desktop, I'm facing difficulties with mobile platforms like Android and iOS.
https://i.stack.imgur.com/1gfWQ.png
HTML:
<input
@keydown="onKeydown(key, $event)"
@paste="onPasteEvent(key, $event)"
@keyup="onKeyup(key, $event)"
@click="onInputClick(key, $event)"
type="text"
:name="'input' + key"
v-model="code[key]"
:maxlength="(key === 0 ? 6 : 5)"
>
Keydown handler:
onKeydown(key, event) {
let input = document.querySelector('input[name="input'+ key +'"]');
switch (event.key) {
case 'Backspace':
// If not in first field and no text before the cursor
// position; focus the previous field.
if (key > 0 && !this.getPrevWord(input)) {
this.moveCursorLeft(key);
}
break;
case 'Delete':
// If not in last field and no text after the cursor position;
// focus the next field.
if (key < (this.inputs - 1) && !this.getNextWord(input)) {
this.moveCursorRight(key);
}
break;
}
},