带字符边框的数字输入

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>

Answer 2

如果样式布局是您的问题，那是什么？

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;
  border: none;
}

input:focus {
  outline: none;
}

<input type="text" pattern="\d*" maxlength="4">

基本上，您认为布局几乎可以。我只是删除轮廓边框以使其看起来更好。另一边注maxlength在this的input type=number中被忽略。请让我知道，这是否是您想要的。谢谢。