自定义单字符方块输入框开发求助：实现布局及输入限制

我来帮你搞定这个自定义输入组件！你现在的单个输入框要改成方块布局+每个方块仅允许输入一个字符，其实可以拆分成多个小输入框来实现，配合CSS布局和简单的JS交互就能达到理想效果，下面是完整的实现代码和解释：

完整实现代码 #

HTML 结构 #

<label><b>CNP</b></label>
<div class="input-group">
  <input class="input-box" type="text" maxlength="1" inputmode="numeric">
  <input class="input-box" type="text" maxlength="1" inputmode="numeric">
  <input class="input-box" type="text" maxlength="1" inputmode="numeric">
  <input class="input-box" type="text" maxlength="1" inputmode="numeric">
  <input class="input-box" type="text" maxlength="1" inputmode="numeric">
  <input class="input-box" type="text" maxlength="1" inputmode="numeric">
  <!-- 可根据需求添加更多input元素 -->
</div>

CSS 样式 #

.input-group {
  display: flex;
  gap: 8px; /* 控制方块之间的间距 */
  margin-top: 8px;
}

.input-box {
  width: 40px;
  height: 40px;
  border: 1px solid #000;
  border-radius: 4px; /* 可选：添加圆角效果 */
  text-align: center;
  font-size: 18px;
  outline: none;
}

.input-box:focus {
  border-color: #2196F3; /* 聚焦时的高亮边框色 */
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2);
}

JavaScript 交互优化 #

const inputBoxes = document.querySelectorAll('.input-box');

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

  // 按Backspace时，若当前输入框为空，跳转到上一个并清空内容
  input.addEventListener('keydown', (e) => {
    if (e.key === 'Backspace' && !input.value && index > 0) {
      inputBoxes[index - 1].focus();
      inputBoxes[index - 1].value = '';
    }
  });

  // 限制仅输入数字（适配CNP的数字场景，可修改正则允许其他字符）
  input.addEventListener('beforeinput', (e) => {
    if (!/^\d$/.test(e.data)) {
      e.preventDefault();
    }
  });

  // 禁止粘贴多个字符，避免破坏单字符限制
  input.addEventListener('paste', (e) => {
    const pasteData = e.clipboardData.getData('text');
    if (pasteData.length !== 1 || !/^\d$/.test(pasteData)) {
      e.preventDefault();
    }
  });
});

关键实现细节解释 #

• HTML部分：用多个input替代单个输入框，每个设置maxlength="1"强制单字符输入；inputmode="numeric"让移动端自动弹出数字键盘，提升输入体验。
• CSS部分：通过flex布局实现方块横向排列，用gap控制间距；给每个方块设置固定宽高、居中对齐文本，聚焦时的样式增强用户感知。
• JS部分：
  • 输入后自动跳转下一个输入框，减少用户手动切换操作；
  • Backspace键联动，删除时自动回到上一个输入框；
  • 限制输入为数字（符合CNP的场景），也可修改正则表达式允许字母等其他字符；
  • 禁止粘贴多字符，避免破坏单字符限制规则。

你可以根据实际需求调整方块数量、大小、颜色等样式，比如CNP是13位的话，直接添加13个input元素即可。

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