如何在input标签中实现占位圆点逐字符消失、回退恢复的效果

实现方案 #

你不需要单独维护圆点的增删逻辑，也不需要监听退格事件，直接通过输入值的长度动态生成圆点列表即可，修改成本极低：

1. 核心逻辑调整

删掉原来的dots状态，直接根据输入值长度和总占位位数动态计算要显示的圆点数量，这样无论是输入新增字符还是删除字符，圆点都会自动匹配：

// VerificationInput.tsx
const TOTAL_PLACEHOLDER_COUNT = 4; // 总占位圆点数量，要6位就改成6
const dotElement = <Dot
    width='11'
    height='11'
    viewBox='0 0 20 20'
    color='#e0e0e0'
  />;
  
const [inputValue, setInputValue] = useState("");

const handleDots = (event: ChangeEvent<HTMLInputElement>) => {
  // 只需要存输入值即可，不需要额外操作圆点
  setInputValue(event.target.value);
};

// ... 其他逻辑保留

<div className='card-num__full'>
  <input
    type='tel'
    autoComplete='on'
    maxLength={TOTAL_PLACEHOLDER_COUNT}
    className='card-num__field'
    value={inputValue}
    onChange={handleDots}
    {...args}
  />
  <div className="dot-container">
    {/* 动态生成圆点：总位数减去已输入的字符数，就是要显示的圆点数量 */}
    {Array(TOTAL_PLACEHOLDER_COUNT - inputValue.length)
      .fill(dotElement)
      .map((dot, idx) => <span key={idx}>{dot}</span>)
    }
  </div>
</div>

2. CSS调整

需要补充几个样式，避免输入内容和圆点重叠，同时保证输入框能正常响应点击：

.card-num__full {
  position: relative;
  width: 56px;
  height: 22px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

input.card-num__field {
  position: absolute;
  /* 提高层级保证输入框能被点击 */
  z-index: 2;
  top: 1px;
  width: 56px;
  height: 22px;
  /* 如果要显示输入的数字就删掉下面这行，同时调整字符间距和圆点对齐 */
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

.dot-container {
  position: absolute;
  z-index: 1;
  display: flex;
  gap: 8px; /* 调整圆点间距和输入字符间距一致 */
}

如果需要显示输入的字符，只需要删掉color: transparent，再给输入框加letter-spacing属性，让每个字符的间距和圆点的gap值一致即可，保证输入的字符刚好占据一个圆点的位置。

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