html - 使用 CSS 将文本输入拆分为几个单元格

Question

我需要将输入拆分为几个单元格。我想绘制几个 block ，并且在每次用户按下时，其中一个 block 将被填充。像这样:

正确的做法是什么？

这是表单的代码:

  <div class="wrap-log-in-form" *ngIf="step == 'pass'">      

  <input type="text" class="spliting-input"  maxlength="6">

  <div class="buttens-log-in"> 
      <input type="button" value="אמת">
      <input type="button" value="קבל הודעה בטלפון">      
  </div>
</div>

Answer 1

您可以在 input 上使用 CSS 背景图片并尝试使用 letter-spacing 使文本位于正确的区域，但这真的很难而不是一个很好的解决方案。

问题是每个设备和浏览器显示的字符略有不同，因此间距总是有一点偏差。这非常 hacky，但如果您只能访问 CSS，则可以正常工作。

更好的解决方案

使用 Javascript 解析输入并将每个字符拆分为具有独特位置和背景样式的自己的元素。