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

Question

我需要将输入拆分为几个单元格。我想画几个图块，每按一次用户，其中一个图块就会填满。像这样：

正确的方法是什么？

这是以下形式的代码：

  <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解析输入，并使用独特的位置和背景样式将每个字符分成自己的元素。