在输入下方显示行答案

【问题标题】：Showing lines underneath input在输入下方显示行
【发布时间】：2017-06-26 19:00:40
【问题描述】：

我想为我的应用创建一个简单的验证（无后端）。

它将包含一个最多只能占用四位数字的输入，并且每次用户输入一位数字时，数字下方都会出现一行。

因为我真的不擅长解释这里的东西，所以这是我想要实现的图像：

如您所见，输入最多需要四位数字。并且每次插入一个新数字时都会出现一行。

一些代码sn-ps

<ion-slide style="color: black">
  <div class="row row-white">
    <div class="col col-white">
      <h4 style="margin-top:100px;">Martin Nordström</h4>
    </div>
  </div>
  <div class="row row-white">
    <div class="col col-white">
      <p style="margin-bottom:60px">0732649635</p>
    </div>
  </div>
  <div class="row row-white">
    <div class="col col-white">
      <input type="number">
    </div>
  </div>
</ion-slide>

我想我可以添加一个$watch 来查看值何时更改，从而使用 jQuery 更新 CSS 类？

【问题讨论】：

好像是这个stackoverflow.com/questions/8648867/…的副本

标签： html css angularjs ionic-framework

【解决方案1】：

此方法使用重复的线性渐变。我没有想出这个主意。我从中获取代码的来源位于 sn-p 下方。

ch 单位应用相对于“0”（零）宽度的大小，因此保持字体系列相同很重要，因为每个字符具有相同的宽度和高度。

input {
  display: block;
  margin: 2em auto;
  border: none;
  padding: 0;
  width: 6ch;
  background: repeating-linear-gradient(90deg, dimgrey 0, dimgrey 1ch, transparent 0, transparent 1.5ch) 0 100%/ 5.5ch 2px no-repeat;
  font: 5ch droid sans mono, consolas, monospace;
  letter-spacing: 0.5ch;
}

&lt;input type="text" value="1346"&gt;

来源：https://codepen.io/thebabydino/pen/mRrPwB

【讨论】：