点击按钮自动填充下一个空文本输入框的原生JS实现方法

现有代码缺陷 #

当前逻辑依赖全局field变量存储最后一次获得焦点的输入框，点击按钮时仅会对该聚焦框赋值，无法自动按顺序定位第一个未填充的空输入框；且初始状态下如果用户未手动点击过输入框，field值为0时点击按钮无任何响应。

核心实现逻辑 #

• 点击按钮时，获取按钮对应的待填充文本值
• 按页面DOM排列顺序遍历所有文本输入框
• 匹配到第一个值为空的输入框时，将文本填入该框
• 兼容原有手动选择输入框填充的交互，不破坏原有使用习惯
• 修复原代码中重复id的不规范问题（HTML规范要求id全局唯一，原代码存在两个id为txt3的按钮）

完整可运行代码 #

<body>
  <div class="buttons">
    <button class="btn" onclick="addText(this)">txt1</button>
    <button class="btn" onclick="addText(this)">txt2</button>
    <button class="btn" onclick="addText(this)">txt3</button>
    <button class="btn" onclick="addText(this)">txt3</button>
    <button class="btn" onclick="addText(this)">txt4</button>
    <button class="btn" onclick="addText(this)">txt5</button>
  </div>

  <div class="textBoxes">
    <input type="text" class="inputs" placeholder="WPT 1" autofocus/>
    <input type="text" class="inputs" placeholder="WPT 2"/>
    <input type="text" class="inputs" placeholder="WPT 3"/>
    <input type="text" class="inputs" placeholder="WPT 4"/>
    <input type="text" class="inputs" placeholder="WPT 5"/>
  </div>

  <script>
    // 初始化默认聚焦第一个输入框，兼容手动选框填充逻辑
    let currentField = document.querySelector('.inputs[autofocus]');
    // 监听所有输入框聚焦事件，更新当前选中的输入框
    document.querySelectorAll('.inputs').forEach(input => {
      input.addEventListener('focus', () => {
        currentField = input;
      })
    })

    function addText(btn) {
      const fillContent = btn.textContent.trim();
      const inputList = document.querySelectorAll('.inputs');
      let targetInput = null;

      // 按顺序查找第一个空输入框
      for (const input of inputList) {
        if (!input.value.trim()) {
          targetInput = input;
          break;
        }
      }

      // 所有输入框已填满时直接返回
      if (!targetInput) return;

      // 填充内容并将焦点移到该输入框，方便后续修改
      targetInput.value = fillContent;
      targetInput.focus();
    }
  </script>
</body>

自定义调整说明 #

• 如果需要实现「优先填充用户当前聚焦的空框，没有聚焦空框时再按顺序找下一个空框」的逻辑，只需要在查找空框的逻辑前新增判断：如果currentField.value.trim()为空，直接将currentField设为目标输入框即可
• 如果不需要兼容手动选框填充的逻辑，可以直接删除聚焦事件监听相关代码，核心的顺序查找空框填充逻辑不受影响
• 如果希望保留原代码中硬编码传参的写法，只需要将addText的入参改回接收字符串类型的填充内容即可，当前实现直接读取按钮文本是为了减少重复硬编码，后续修改按钮文本时不需要同步修改onclick内的传参

内容的提问来源于stack exchange，提问作者MapMaker