Estoy experimentando tratando de implementar una navegación de teclado entre algunos campos de entrada usando VueJs.
La plantilla está configurada actualmente así...
<div v-for="(note, index) in notes" :key="index" ref="notex" class="input-wrapper" id="input-wrapper" :class="{ 'focused': note.isFocused }"> <input v-model="note.value" spellcheck="false" class="input" v-on:keydown.enter="createNextNote()" :id="note.value ? '' : 'empty-input'" @focus="note.isFocused = true" @blur="note.isFocused = false"> </div>El método que se ejecuta cuando hago clic en "ArrowUp" (configuré un oyente global para eso)
moveUp() { const index = parseInt(Object.keys(this.notes).find(key => this.notes[key].isFocused)); if (!this.notes[index - 1]) { return; } this.notes[index].isFocused = false; this.notes[index - 1].isFocused = true; let requiredInput = this.$refs['notex'][index - 1].firstChild; // Why does this need the timeout? setTimeout(() => requiredInput.focus(), 1); },Énfasis en la función de tiempo de espera.
Lo que no entiendo es la diferencia entre usar el tiempo de espera y no usar el tiempo de espera.
Cuando simplemente llamo a requiredInput.focus() , pone el foco en el campo de entrada, pero el signo de intercalación está al frente del campo de entrada.
Cuando uso el tiempo de espera y lo hago como en el ejemplo anterior, el signo de intercalación está detrás del texto ya ingresado, tal como lo quiero.
Intenté usar el método nextTick de VueJs, pero en ese caso es lo mismo que sin el tiempo de espera: el signo de intercalación se coloca antes del valor de entrada.
¿Podría alguien ayudarme a entender la diferencia, por favor?
Encontré la explicación no mucho después. El problema fue cómo configuré los oyentes para el golpe de tecla...
mounted() { window.addEventListener('keydown', function (e) { if (e.code === 'ArrowUp') { app.moveUp(); } }); }El problema estaba en el hecho de que lo configuré para escuchar "keydown", en lugar de "keyup", por lo que cada vez que se registraba "keydown", de hecho, cambiaba la entrada. Pero, cuando se libera, el campo de entrada intenta "saltar" a la fila anterior, pero como no hay una fila anterior, salta al inicio del valor en dicha entrada.
Para agregar, moví a los oyentes a la plantilla en sí e introduje la función preventDefault(), que limita el comportamiento predeterminado de los campos de entrada.
<input v-on:keydown.up="moveUp($event)" v-on:keydown.down="moveDown($event)"> moveUp(e) { e.preventDefault(); // Do the rest }