找到第一个空输入

Question

<div class="input-group">
    <input type="password" maxlength="1" value="" readonly="">
    <input type="password" maxlength="1" value="" readonly="">
    <input type="password" maxlength="1" value="" readonly="">
    <input type="password" maxlength="1" value="" readonly="">
</div>

我在页面上只有这些输入，而我正在尝试聚焦并动态地为每个空输入输入一个值：

document.querySelector('input[value=""]').value = 1

...仅适用于第一个输入，不应该每次都选择下一个空输入吗？

Answer 1

这有效：

document.getElementById('fill').addEventListener('click', evt => {
  document.querySelector('input[value=""]').setAttribute('value', '1');
});

<div class="input-group">
    <input type="password" maxlength="1" value="" readonly="">
    <input type="password" maxlength="1" value="" readonly="">
    <input type="password" maxlength="1" value="" readonly="">
    <input type="password" maxlength="1" value="" readonly="">
</div>
<button id="fill">Fill</button>

.value = ...实际上并没有在DOM中更改属性本身。使用.setAttribute在querySelector可以看到的DOM中进行实际更改。