我正在处理html,css和js中的格式输入字段.
一个例子是具有以下模式的日期格式字段：**.**.****.当我在输入字段中输入内容时,当我到达框的末尾时,Chrome会“向左滚动”.
我怎么能阻止这个？
分隔每个字符的行由背景图像构成.使用等宽字体和设置字母间距,每个字符进入“字段”.如果达到输入字段的大小,它会向前滚动并使用背景.
为了解决这个问题,我将input元素放入div元素,将div元素限制为宽度并添加边框和overflow：none;到了div.结果：它在Firefox中工作正常,Chrome仍然将输入内容滚动到左侧.
解决方法
我有同样的问题,并找到了一个CSS解决方案：
<style>
#input-wrapper {
border: 1px solid #C9CFD5;
background-image: url('grid.png'); /* some tile image for the vertical lines */
width: 200px;
height: 50px;
overflow: hidden;
}
#input-wrapper input {
border: 0 none;
width: 400px;
height: 50px;
background: transparent;
font-size: 30px;
font-family: "Courier",monospace;
letter-spacing: 28px;
text-indent: 18px;
}
</style>
<div id="input-wrapper">
<input type="text" maxlength="4" length="4" value="1234" />
</div>
玩得开心！
