使用单个input实现4位验证码遇点击异常、下划线同步问题求助

问题1：点击输入区域异常修复 #

你遇到的必须点击输入框末尾才能输入的问题，核心原因是text-indent和大数值letter-spacing组合导致输入框光标触发逻辑错位：text-indent将输入起始位置强制右移了105px，输入框左侧105px区域属于「无内容的缩进空白」，浏览器默认点击空白区域时会将光标定位到已有内容末尾，就出现了只能点击末尾才能正常输入的问题。
修复方法：

• 删掉text-indent属性，改用左右padding控制输入内容边距，同时给元素设置box-sizing: border-box，避免padding把输入框撑宽
• 调整letter-spacing数值，刚好匹配单个验证码位的宽度即可，4位验证码的计算规则为：letter-spacing = (输入框宽度 - 左右padding总和 - 4个字符宽度) / 3（4个字符之间只有3个间距）

问题2：数字与短横线对齐实现技巧 #

你当前用伪元素content写四个下划线的方案，会因为下划线和数字的字符宽度差异、字体渲染差异导致对齐失败，推荐用渐变生成独立横线的方案，可完全和输入位一一对应：

• 用linear-gradient生成4个等宽横线，背景尺寸刚好对应单个验证码位的宽度，自动和输入位置对齐
• 输入框设置等宽字体（比如font-family: monospace），保证每个数字的宽度完全一致，不会出现输入不同数字时位置偏移的问题
• 可适当调整光标颜色、宽度，更符合验证码输入的交互感知

问题3：实现建议与最佳实践 #

• 输入限制：添加input事件监听，只允许输入数字，自动过滤非数字字符，输入满4位后可自动触发校验逻辑
• 交互优化：输入框聚焦时可给当前输入位加高亮效果，删除内容时自动回退到上一位
• 无障碍适配：保留原生input的语义，不要完全隐藏输入框，保证读屏设备可以正常识别验证码输入场景
• 兼容性：不要依赖特殊字符的间距对齐，用渐变背景、等宽字体的方案适配不同设备、不同字体的渲染场景

修复后完整可运行代码 #

* {
  box-sizing: border-box;
}
.verf {
  position: relative;
  float: left;
}
input {
  width: 320px;
  height: 50px;
  border-radius: 5px;
  border: 1px solid #ededed;
  outline: unset !important;
  padding: 0 15px 2px;
  font-size: 24px;
  font-family: monospace;
  letter-spacing: 52px;
  /* 渐变生成4个底部横线，单格宽度70px，横线长60px */
  background: linear-gradient(to right, orange 60px, transparent 60px) left bottom / 70px 2px repeat-x;
  caret-color: orange;
}

<div class="verf">
  <!-- 输入限制只允许填数字 -->
  <input maxlength="4" value="4578" oninput="value=value.replace(/[^0-9]/g,'')"/>
</div>

内容的提问来源于stack exchange，提问作者Jack The Baker