I have an Virtual keyboard with Javascript the keyboard is typing in two inputs after reached maxlength it is focusing to second input. my problem is when i want to type in first input i should clicked to first input to focus it than typing with keyboard numbers

My question is How i can typing using this keyboard without clicking inside input, the first input should start typing immediately after i clicked on the buttons numbers

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" />

CodePudding user response：

<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>