在未对焦的情况下输入第一个输入-解网

问：

我有一个带有 Javascript 的虚拟键盘，键盘在达到最大长度后输入两个输入，它专注于第二个输入。我的问题是，当我想输入第一个输入时，我应该单击第一个输入来聚焦它，而不是用键盘数字输入

我的问题是如何在不单击输入内部的情况下使用此键盘进行输入，第一个输入应该在我单击按钮数字后立即开始输入

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

JavaScript的

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

上一个：使用同一键盘输入两个输入

下一个：使用 iframe 外部的按钮提交 iframe 表单

在未对焦的情况下输入第一个输入

Typing in the firt input without focusing

评论