Tengo un teclado virtual con Javascript, el teclado está escribiendo en dos entradas después de alcanzar la longitud máxima, se está enfocando en la segunda entrada. mi problema es cuando quiero escribir la primera entrada, debo hacer clic en la primera entrada para enfocarla en lugar de escribir con los números del teclado
Mi pregunta es ¿Cómo puedo escribir usando este teclado sin hacer clic dentro de la entrada? La primera entrada debería comenzar a escribir inmediatamente después de hacer clic en los números de los botones.
const maxLength = 7; const firstInput = document.querySelector("#pin"); const secondInput = document.querySelector("#key"); const changedEvent = new Event("change") let activeInput; firstInput.addEventListener("focus", (event) => { activeInput = event.target; }); firstInput.addEventListener("change", (event) => { console.log("i'm changing!"); if (firstInput.value.length >= maxLength) { activeInput = secondInput; secondInput.focus(); } }); secondInput.addEventListener("focus", (event) => { activeInput = event.target; }); function resetNumber() { if (!activeInput) { console.log("pin"); return; } activeInput.value = ""; } function setNumber(number) { if (!activeInput) { console.log("pin"); return; } activeInput.value = activeInput.value === number ? "" : (activeInput.value += number); // manually tell the input that it has changed, so that the event listener defined above gets called. this usually only will happen with actual keyboard input activeInput.dispatchEvent(changedEvent); } <button onclick="resetNumber()">Reset</button> <button onclick="setNumber(0)">0</button> <button onclick="setNumber(1)">1</button> <button onclick="setNumber(2)">2</button> <button onclick="setNumber(3)">3</button> <button onclick="setNumber(4)">4</button> <button onclick="setNumber(5)">5</button> <button onclick="setNumber(6)">6</button> <button onclick="setNumber(7)">7</button> <button onclick="setNumber(8)">8</button> <button onclick="setNumber(9)">9</button> <br /> <input type="text" id="pin" /> <input type="text" id="key" /> <button id="reset" onclick="resetNumber()">Reset</button> <br /> <input type="text" id="pin" /> <input type="text" id="key" /> <script> const maxLength = 7; const firstInput = document.querySelector('#pin'); const secondInput = document.querySelector('#key'); const resetBtn = document.querySelector('#reset'); for (let i = 9; i >= 0; i--) { const numBtn = document.createElement('button'); numBtn.className = 'number'; numBtn.innerText = i; resetBtn.parentElement.insertBefore(numBtn, resetBtn.nextSibling); } const numberBtns = document.querySelectorAll('.number'); const resetNumber = () => { firstInput.setAttribute('value', ''); secondInput.setAttribute('value', ''); }; const setVal = (e) => { const num = parseInt(e.target.innerText, 10); if (firstInput.value.length <= maxLength) return firstInput.setAttribute('value', firstInput.value + num); secondInput.setAttribute('value', secondInput.value + num); }; numberBtns.forEach((btn) => btn.addEventListener('click', setVal)); </script>