javascript - 带字符边框的数字输入

Question

我正在尝试实现下面的布局，但我的所有尝试都失败了。正如您在下面的代码片段中看到的，它在桌面和 iPad 上看起来并不正确。

基本上我有一个数字输入字段，访问者可以在其中输入他们的四位数邮政编码以获得结果。

我不想创建四个不同的输入并为它们设置边框以获得所需的布局。

这可以只使用一个输入框来完成吗？

input {
  background: linear-gradient(to right, #eff1f1, #eff1f1 25px, white 10px, white 40px, #eff1f1 40px, #eff1f1 65px, white 10px, white 80px, #eff1f1 80px, #eff1f1 105px, white 10px, white 120px, #eff1f1 120px, #eff1f1 145px, white 10px, white 160px);
    width: 180px !important;
    height: 30px !important;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 29px;
    padding-left: 5px;
    text-align: left;
    margin: 10px auto -5px auto;
    color: transparent !important;
    text-shadow: 0px 0px 0px #666;
}

<input type="number"></input>

Answer 1

试试这个

$(document).ready(function(){
  $(".input").keyup(function(){
    var len=$(this).val().length;
    if(len==4){
     $(".input").blur(); 
    }
  });
});

.box{
height:300px;
width:300px;
}
.input{
  height:40px;
  width:200px;
  background:transparent;
  border:none;
  font-size:25px;
  letter-spacing:36px;
  text-indent:15px;
}

.input:focus{
  outline:none;
}

.inputbg1,.inputbg2,.inputbg3,.inputbg4{
  z-index:-1;
  position:absolute;
  height:44px;
  width:40px;
  background:#f1f1f1;
  border-right:solid 10px #fff;
  border-left:solid 10px #fff;
}

.inputbg1{
left:0px;
}

.inputbg2{
left:50px;
}

.inputbg3{
left:100px;
}

.inputbg4{
left:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<input type="text"  class="input" max-length="4">
<span class="inputbg1"></span>
<span class="inputbg2"></span>
<span class="inputbg3"></span>
<span class="inputbg4"></span>
</div>