Entiendo el problema al que me enfrento, pero no sé cómo solucionarlo. Tengo 6 campos de entrada en los que, cada vez que ingresa un valor en un campo de entrada, pasa al siguiente y luego activa el método .focus().
El problema aquí es que, después del último campo de entrada, no hay más campos de entrada, lo que genera el error "No se pueden leer las propiedades de undefined (leyendo 'foco')".
Intenté agregar varias declaraciones if para deshabilitar el enfoque después de ingresar el último campo de entrada, pero parece que no funciona y sigo recibiendo el error.
índice.html
<div class="code-container"> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> </div>guión.js
const codes = document.querySelectorAll(".code"); codes[0].focus(); codes.forEach((code, idx) => { code.addEventListener("keydown", (e) => { console.log(idx); if (e.key >= 0 && e.key <= 9) { codes[idx].value = ""; setTimeout(() => codes[idx + 1].focus(), 10); } else if (e.key === "Backspace") { setTimeout(() => codes[idx - 1].focus(), 10); } else if (idx == codes.length - 1) { codes[idx].blur(); } }); });registro de errores
script.js:10 Uncaught TypeError: Cannot read properties of undefined (reading 'focus')Ese es probablemente un trabajo para el operador de módulo .
Reemplace idx + 1 por (idx + 1) % codes.length .
Aquí está su código cambiado un poco ...
Para tener en cuenta el blur esperado para la última entrada... Y para evitar un error al backspace en la primera.
const codes = document.querySelectorAll(".code"); codes[0].focus(); codes.forEach((code, idx) => { code.addEventListener("keydown", (e) => { console.log(idx); if (e.key >= 0 && e.key <= 9) { if (idx == codes.length - 1) { setTimeout(() => codes[idx].blur(), 10); return } codes[idx].value = ""; setTimeout(() => codes[(idx + 1) % codes.length].focus(), 10); } else if (e.key === "Backspace" && idx != 0) { setTimeout(() => codes[(idx - 1) % codes.length].focus(), 10); } }); }); <div class="code-container"> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> <input type="number" class="code" placeholder="0" min="0" max="9" required> </div>definitivamente debe comparar los códigos. longitud y compararlo con idx para aplicar el movimiento al siguiente elemento, excepto al último, como se muestra a continuación
const codes = document.querySelectorAll(".code"); codes[0].focus(); const codexLastIndex = codes.length - 1; codes.forEach((code, idx) => { code.addEventListener("keydown", (e) => { console.log(idx); const isLastElement = e.target == codes[codes.length - 1]; const isFirstElement = e.target == codes[0]; // special use case for the last element if (isLastElement) { if ( e.key >= 0 && e.key <= 9) { codes[idx].value = e.key; } } if ( ( e.key >= 0 && e.key <= 9) && !isLastElement) { codes[idx].value = ""; setTimeout(() => codes[idx + 1].focus(), 10); } else if (e.key === "Backspace" && !isFirstElement) { // remove the error with the backspace in the first element setTimeout(() => codes[idx - 1].focus(), 10); } else if (idx == codes.length - 1) { codes[idx].blur(); } }); }); este código usa e.preventDefault(); por lógica https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
const codes = document.querySelectorAll(".code"); codes[0].focus(); const codexLastIndex = codes.length - 1; codes.forEach((code, idx) => { code.addEventListener("keydown", (e) => { e.preventDefault(); // here adding preventDefault() function to stop the defaults actions const isLastElement = e.target == codes[codes.length - 1]; const isFirstElement = e.target == codes[0]; // special use case for the last element if (isLastElement) { if ( e.key >= 0 && e.key <= 9) { codes[idx].value = e.key; } } if ( ( e.key >= 0 && e.key <= 9) && !isLastElement) { codes[idx].value = e.key; setTimeout(()=> codes[idx + 1].focus(), 10); } else if (e.key === "Backspace" && !isFirstElement) { // remove the error with the backspace in the first element setTimeout(() => codes[idx - 1].focus(), 10); } else if (idx == codes.length - 1) { codes[idx].blur(); } }); });Puedes intentar cambiar codes[idx].blur(); a e.preventDefault También puede ver aquí para obtener más detalles ingrese la descripción del enlace aquí