如何用CSS实现带间距的单字符独立输入框并支持定点输入

原方案用单个<input>加背景下划线的方式，只能做出字符分隔的视觉效果，但核心需求——点击任意“框”就能定位光标输入——没法实现，因为单个input的光标位置和输入文本绑定，没法直接跳到指定的字符位置。下面是满足需求的完整实现方案：

实现思路 #

用多个单字符<input>元素组成单词输入组，每个input仅允许输入1个字符，通过CSS将它们排列成一行模拟整体输入框的视觉效果；再通过JavaScript处理输入跳转、删除跳转、粘贴内容等交互逻辑，实现点击任意框即可输入的需求。

HTML结构 #

每个单词对应一个容器，里面放置对应长度的单字符输入框：

<!-- 5个字符的单词输入组 -->
<div class="word-input-group">
  <input type="text" class="char-input" maxlength="1" autocomplete="off" placeholder="_">
  <input type="text" class="char-input" maxlength="1" autocomplete="off" placeholder="_">
  <input type="text" class="char-input" maxlength="1" autocomplete="off" placeholder="_">
  <input type="text" class="char-input" maxlength="1" autocomplete="off" placeholder="_">
  <input type="text" class="char-input" maxlength="1" autocomplete="off" placeholder="_">
</div>

<!-- 6个字符的单词输入组 -->
<div class="word-input-group">
  <input type="text" class="char-input" maxlength="1" autocomplete="off" placeholder="_">
  <input type="text" class="char-input" maxlength="1" autocomplete="off" placeholder="_">
  <input type="text" class="char-input" maxlength="1" autocomplete="off" placeholder="_">
  <input type="text" class="char-input" maxlength="1" autocomplete="off" placeholder="_">
  <input type="text" class="char-input" maxlength="1" autocomplete="off" placeholder="_">
  <input type="text" class="char-input" maxlength="1" autocomplete="off" placeholder="_">
</div>

CSS样式 #

设置输入框的视觉样式，排列成一行并添加交互反馈：

.word-input-group {
  display: flex;
  gap: 8px; /* 字符框之间的间距 */
  margin-bottom: 16px;
}

.char-input {
  width: 42px;
  height: 50px;
  font-size: 24px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid #333;
  border-radius: 6px;
  font-family: monospace;
  outline: none;
  transition: border-color 0.2s ease;
}

.char-input:focus {
  border-color: #2563eb; /* 聚焦时的高亮边框 */
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* 输入字符后隐藏占位符 */
.char-input:not(:placeholder-shown) {
  font-weight: 600;
}

JavaScript交互逻辑 #

处理输入跳转、删除跳转、批量粘贴等场景：

document.querySelectorAll('.word-input-group').forEach(group => {
  const inputs = group.querySelectorAll('.char-input');

  inputs.forEach((input, index) => {
    // 输入字符后自动跳转到下一个输入框
    input.addEventListener('input', () => {
      if (input.value && index < inputs.length - 1) {
        inputs[index + 1].focus();
      }
    });

    // 按删除键且当前框为空时，跳转到上一个输入框
    input.addEventListener('keydown', (e) => {
      if (e.key === 'Backspace' && !input.value && index > 0) {
        inputs[index - 1].focus();
        inputs[index - 1].select(); // 选中内容方便直接删除
      }
    });

    // 处理粘贴内容，自动填充到后续输入框
    input.addEventListener('paste', (e) => {
      e.preventDefault();
      const pasteContent = e.clipboardData.getData('text')
        .toUpperCase()
        .replace(/[^A-Z]/g, ''); // 只保留字母

      let currentPos = index;
      for (const char of pasteContent) {
        if (currentPos >= inputs.length) break;
        inputs[currentPos].value = char;
        currentPos++;
      }
      // 跳转到最后一个填充框的下一个位置（如果存在）
      if (currentPos < inputs.length) {
        inputs[currentPos].focus();
      }
    });
  });
});

效果说明 #

• 点击任意字符框即可聚焦并输入内容
• 输入字符后自动跳转到下一个框，删除空框时自动返回上一个框
• 支持批量粘贴字母，会自动填充到后续输入框
• 聚焦状态有明确的视觉提示，样式统一整洁

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