实现点击div容器时自动激活组内首个表单输入框

核心逻辑是给numberContainer绑定点击事件，无论点击容器本身还是内部的输入框，都强制让第一个输入框userPhone_digit-01获得焦点。

代码实现 #

HTML 结构（示例）

<div id="numberContainer">
  <input type="text" id="userPhone_digit-01" maxlength="1">
  <input type="text" id="userPhone_digit-02" maxlength="1">
  <!-- 剩余8个输入框按此格式添加 -->
</div>

JavaScript 处理

const container = document.getElementById('numberContainer');
const firstInput = document.getElementById('userPhone_digit-01');

// 绑定容器点击事件
container.addEventListener('click', () => {
  // 直接让第一个输入框聚焦
  firstInput.focus();
  
  // 可选：如果输入框已有内容，将光标定位到内容末尾
  // firstInput.setSelectionRange(firstInput.value.length, firstInput.value.length);
});

关键说明 #

• 利用事件冒泡机制，点击内部输入框时事件会传递到容器，触发同一个处理函数，确保统一行为。
• 直接调用focus()会覆盖输入框原有onfocus逻辑，解决你之前调整onfocus未生效的问题。
• 可选的setSelectionRange代码可以优化用户体验：如果第一个输入框已有内容，光标会自动跳到末尾，方便继续输入。

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