Question

因此，我想创建一个输入域，例如iOS，输入6个字符的数字验证码。您可以在下面找到一个示例（请查看突出显示的绿色示例）。

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

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

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

到目前为止，我发现的内容类似于您在下面的代码段中找到的内容。 两个问题： 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-查看此图片：

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

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

固定的错误： 修正了打字时的震动

iOS样式输入栏

1 个答案: