Tengo un campo de entrada con el cuadro de nombre. Puedo avanzar después de la entrada por
box.addEventListener('input', function () { if(!isNaN(parseInt(box.value))){ box.value = ""; }else if(box != null){ box.nextSibling.focus(); } });Y está funcionando bien. Deseo pasar al hermano anterior de la entrada con retroceso, y lo estoy haciendo con el hermano anterior y con la misma lógica.
box.addEventListener('keyup', function (e) { if(e.key == 'Backspace' && box != null){ box.previousSibling.focus(); } }) Pero hacer esto solo funciona correctamente para el primer retroceso, para el resto de las entradas necesito retroceder dos veces. También probé con el evento keydown e incluso eso no fue perfecto.
El problema es que (en los navegadores que usted y yo estamos usando) los eventos input se procesan antes que los eventos de keyup , por lo que presiona la tecla de retroceso en un cuadro que no está vacío y se elimina un carácter, por lo que input se procesa, luego se selecciona el siguiente hermano, luego el keyup se procesa y te mueves al hermano anterior, lo que parece no ir a ninguna parte.
Puede solucionar esto almacenando el cuadro donde cambió el valor, luego, si esa referencia no es null en keyup de retroceso, puede moverse al hermano anterior del cuadro donde se activó el evento keyup , de lo contrario, muévase al hermano anterior del cuadro donde el evento de entrada disparado.
const boxes = document.getElementById('boxes'); let inputInput = null; for(let i = 0; i < 12; i++) { const box = document.createElement('input'); box.type="text" box.addEventListener('input', function (e) { if(!isNaN(parseInt(box.value))) { box.value = ""; } else if(box != null) { inputInput = box; box.nextSibling.focus(); } }); box.addEventListener('keyup', function (e) { if(e.key == 'Backspace' && box != null) { if(inputInput == null) { box.previousSibling.focus(); } else { inputInput.previousSibling.focus(); inputInput = null; } } }); boxes.appendChild(box); } <div id="boxes"> </div> El problema con esta solución es que la precedencia de eventos no forma parte de la especificación, por lo que no es necesariamente compatible con todos los navegadores, es decir, en algunos navegadores, keyup puede ocurrir antes input .