在输入

Question

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

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

因为我在这里解释的东西真的很糟糕，这是我想要实现的目标的形象：

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

部分代码段

<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类？

Answer 1

此方法使用重复的线性渐变。我没想出这个主意。我得到代码的源代码在片段下方。

ch单位应用相对于＆＃34; 0＆＃34;的宽度的大小。 （零），因此保持字体系列相同非常重要，因为每个字符的宽度和高度都相同。

＆＃13;

＆＃13;

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;
}

＆＃13;

<input type="text" value="1346">

＆＃13;

＆＃13;

＆＃13;

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