iOS 风格的输入框

Question

所以我想创建一个像 iOS 一样的输入字段来输入一个 6 个字符的数字验证码。您可以在下方找到一个示例（请查看突出显示的绿色示例）。

对我来说真正重要的是前 3 个字符和后 3 个字符之间的差距比其他单个字母之间的差距更大。

unumgebar 的另一个特点是我可能不能使用多个输入字段，因为无论如何我都想执行键盘输入，比如“删除”。 Auserdem 我不想在您输入代码时单独单击每个文件。

注意：我想要实现的是上面屏幕截图中输入字段的精确副本。

到目前为止，我发现的内容类似于您可以在下面的 sn-p 中找到的内容。 两个问题：1.看起来输入字段有点错误，因为它显示了另一个不应该显示的下划线字段的一些像素。 2. 前三个字段和后三个字段之间没有差距。 （占位符=“3”的不应该显示。

input {
  border: none;
  width: 10.5ch;
  background: 
    repeating-linear-gradient(90deg, 
        black 0, 
        black 1ch, 
        transparent 0, 
        transparent 1.5ch) 
      0 100%/100% 2px no-repeat;
  font: 5ch consolas, monospace;
  letter-spacing: .5ch;
}

<input maxlength='7' value='' placeholder="01234567"/>

任何帮助将不胜感激。提前一百万谢谢。

编辑 1：@Lorddirt - 输入一个块的最后一个数字会使一切变得非常生涩，正如您希望在这个 gif 中看到的那样：

编辑 2：@Lorddirt - 看这张图片：

我很确定您混合了一些计算，但出现了溢出像素。此外，您已经修复了第一个输入的“看起来很糟糕的错误”，但没有修复第二个输入。太糟糕了。非常感谢:)

Answer 1

$(".inputs").keyup(function () {
    if (this.value.length == this.maxLength) {
      var $next = $(this).next('.inputs');
      if ($next.length){
          $(this).next('.inputs').focus();
      }else{
          $(this).blur();
      }
    }else if (this.value.length == 0) {
      var $next = $(this).prev('.inputs');
      if ($next.length){
          $(this).prev('.inputs').focus();
      }else{
          $(this).blur();
      }
    }
});

input {
  caret-color: transparent !important;
  border: none;
  border-color: transparent;
  outline: none;
  width: 4.5ch;
  background: 
    repeating-linear-gradient(90deg, 
        black 0, 
        black 1ch, 
        transparent 0, 
        transparent 1.5ch) 
      0 100%/100% 2px no-repeat;
  font: 5ch consolas, monospace;
  letter-spacing: .5ch;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class='inputs' maxlength='3' value='' placeholder="123"/>
&nbsp;
<input class='inputs' maxlength='3' value='' placeholder="456"/>

应该解决您的问题，关于不想点击输入以及间距

来源：

http://jsfiddle.net/2VETF/3/ - 当输入被填写时，JQuery 转到下一个输入

Transparent, borderless text input - 删除输入框

Hide textfield blinking cursor - 选中时隐藏光标

编辑： 如果它是空的，也让它转到上一个输入（人删除输入）

修正错误： 输入宽度太大。更改为 4.3

修正错误： 修复了打字时的抖动