Javascript 如果文本太长而无法输入，则输入停止默认对齐

我有一个最大长度为4个字符的输入字段。看起来这4个字符之间有一个边框，实际上是显示在输入字段上方的3行

如果我输入第四个字符，所有的字符都会向左跳一点，因为如果输入第五个字符，可能看不到它。如果焦点不在输入字段上，字符会按照我的要求很好地对齐

有没有办法用css、js或jquery解决这个问题，或者这是浏览器无法改变的行为

.pin字段包装器{
宽度：175px；
高度：72px；
边界半径：0px 13px 13px 0px；
左边框：1px实心#2A2A2A；
字体大小：20px；
显示：内联块；
垂直对齐：顶部；
溢出：隐藏；
位置：相对位置；
}
.pin字段{
宽度：100%；
身高：100%；
边界半径：0px 13px 13px 0px；
文本对齐：左对齐；
字体大小：44px；
字母间距：21px；
左侧填充：8px；
边界：无；
盒影：嵌入0px 6px 6px-4px rgba（0,0,0,0.96）；
}
.针场分离器{
位置：绝对位置；
身高：100%；
宽度：1px；
背景：#000；
顶部：0px；
光标：文本；
}
.分离器1{
左：25%；
}
.分离器2{
左：50%；
}
.分离器3{
左：75%；
}

---

您的字体大小与

输入

字段的宽度不匹配。只需将其加宽或减小字体大小即可

.pin字段包装器{
宽度：200px；
高度：72px；
边界半径：0px 13px 13px 0px；
左边框：1px实心#2A2A2A；
字体大小：20px；
显示：内联块；
垂直对齐：顶部；
溢出：隐藏；
位置：相对位置；
}
.pin字段{
宽度：100%；
身高：100%；
边界半径：0px 13px 13px 0px；
文本对齐：左对齐；
字体大小：44px；
字母间距：21px；
左侧填充：8px；
边界：无；
盒影：嵌入0px 6px 6px-4px rgba（0,0,0,0.96）；
}
.针场分离器{
位置：绝对位置；
身高：100%；
宽度：1px；
背景：#000；
顶部：0px；
光标：文本；
}
.分离器1{
左：20%；
}
.分离器2{
左：44%；
}
.分离器3{
左：69%；
}

如果可能的话，你能给我们举一个你想要达到的目标的例子吗？因为有可能有一种比你目前使用的更好的方法。@Rorymcrossan I更新了这个片段。如果你现在输入4个字符，你会看到每一个字符都会跳转一点，但是格式不适合。这些数字并不是平均分配的。没有解决方法吗？@user3398922我更新了我的答案，改变了分隔符的位置。只要试着找到出汗点，它就会起作用。如果您想要另一个解决方案，那么只需使用4个输入，并使用JavaScript来更改焦点，从而允许用户将它们用作单个输入。