Javascript 带字符边框的数字输入

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

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

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

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

输入{
背景：线性梯度（向右，#eff1f1，#eff1f1 25px，白色10px，白色40px，#eff1 40px，#eff1 65px，白色10px，白色80px，#eff1 80px，#eff1 105px，白色10px，白色120px，#eff1 120px，#eff1 145px，白色10px，白色160px）；
宽度：180px！重要；
高度：30px！重要；
字体大小：20px；
字号：900；
字母间距：29px；
左侧填充：5px；
文本对齐：左对齐；
保证金：10px自动-5px自动；
颜色：透明！重要；
文本阴影：0px 0px 0px#666；
}

试试这个

$（文档）.ready（函数（）{
$（“.input”）.keyup（函数（）{
var len=$（this）.val（）.length；
如果（len==4）{
$（“.input”）.blur（）；
}
});
});
.box{
高度：300px；
宽度：300px；
}
.输入{
高度：40px；
宽度：200px；
背景：透明；
边界：无；
字体大小：25px；
字母间距：36px；
文本缩进：15px；
}
.输入：焦点{
大纲：无；
}
.inputbg1、.inputbg2、.inputbg3、.inputbg4{
z指数：-1；
位置：绝对位置；
高度：44px；
宽度：40px；
背景#f1f1；
右边框：实心10px#fff；
左边框：实心10px#fff；
}
.inputbg1{
左：0px；
}
.inputbg2{
左：50px；
}
.inputbg3{
左：100px；
}
.inputbg4{
左：150px；
}

试试这个


$（文档）.ready（函数（）{
$（“.input”）.keyup（函数（）{
var len=$（this）.val（）.length；
如果（len==4）{
$（“.input”）.blur（）；
}
});
});
.box{
高度：300px；
宽度：300px；
}
.输入{
高度：40px；
宽度：200px；
背景：透明；
边界：无；
字体大小：25px；
字母间距：36px；
文本缩进：15px；
}
.输入：焦点{
大纲：无；
}
.inputbg1、.inputbg2、.inputbg3、.inputbg4{
z指数：-1；
位置：绝对位置；
高度：44px；
宽度：40px；
背景#f1f1；
右边框：实心10px#fff；
左边框：实心10px#fff；
}
.inputbg1{
左：0px；
}
.inputbg2{
左：50px；
}
.inputbg3{
左：100px；
}
.inputbg4{
左：150px；
}
如果样式布局是您的问题，那么这是怎么回事


输入{
背景：线性梯度（向右，#eff1f1，#eff1f1 25px，白色10px，白色40px，#eff1 40px，#eff1 65px，白色10px，白色80px，#eff1 80px，#eff1 105px，白色10px，白色120px，#eff1 120px，#eff1 145px，白色10px，白色160px）；
宽度：180px！重要；
高度：30px！重要；
字体大小：20px；
字号：900；
字母间距：29px；
左侧填充：5px；
文本对齐：左对齐；
保证金：10px自动-5px自动；
颜色：透明！重要；
文本阴影：0px 0px 0px#666；
边界：无；
}
输入：焦点{
大纲：无；
}
如果样式布局是您的问题，那么这是怎么回事


输入{
背景：线性梯度（向右，#eff1f1，#eff1f1 25px，白色10px，白色40px，#eff1 40px，#eff1 65px，白色10px，白色80px，#eff1 80px，#eff1 105px，白色10px，白色120px，#eff1 120px，#eff1 145px，白色10px，白色160px）；
宽度：180px！重要；
高度：30px！重要；
字体大小：20px；
字号：900；
字母间距：29px；
左侧填充：5px；
文本对齐：左对齐；
保证金：10px自动-5px自动；
颜色：透明！重要；
文本阴影：0px 0px 0px#666；
边界：无；
}
输入：焦点{
大纲：无；
}
分享你已经尝试过的内容。分享你的代码。我用代码更新了原始帖子。看起来不错-我更改了
字母间距：29px至
字母间距：27px以获得更好的间距和整体外观good@DarrenSweeney我觉得必须有一个比背景渐变更好的解决方案。分享你已经尝试过的。分享你的代码。我用代码更新了原始帖子。看起来不错-我更改了
字母间距：29px至
字母间距：27px以获得更好的间距和整体外观good@DarrenSweeney我觉得必须有一个比背景渐变更好的解决方案。这似乎有效，但当你在输入最后一个数字后尝试删除数字时，它不会删除数字。这似乎有效，但当你在输入最后一个数字后尝试删除数字时，它不会删除数字。