我正在处理 html、css 和 js 格式的输入字段。
一个示例是具有以下模式的日期格式字段：**.**.****。当我在输入字段中输入内容时，当我到达框的末尾时，Chrome 会向左“滚动”。
如何防止这种情况发生？
分隔每个字符的线由背景图像组成。使用等宽字体和一组letter-spacing，每个字符都进入一个“字段”。如果达到输入字段的大小，它会向前滚动并带上背景。
为了解决这个问题，我将 input 元素放入了一个 div 元素中，将 div 元素限制为一个宽度，并在 div 中添加了边框和overflow: none;。结果：在 Firefox 中运行良好，Chrome 仍然向左滚动输入内容。
我做错了吗？有没有其他解决方案？是否有 -webkit 属性来防止这种情况？提前谢谢！
【问题讨论】：
标签： html css google-chrome input
我遇到了同样的问题并找到了 CSS 解决方案：
#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;
}<div id="input-wrapper">
<input type="text" maxlength="4" length="4" value="1234" />
</div>玩得开心！
【讨论】：
感谢包装器的建议，我在 Firefox 中遇到了同样的问题。 在 Chrome 中，我使用 JS 和 scrollLeft 方法修复了它（另一方面，它在 ff 中不起作用）。 在 jQuery 中：
$('input').live('keyup', function() {
$(this).parent().scrollLeft(0);
});
【讨论】：
scrollLeft 在 IE 中仅适用于具有滚动条的元素（请查看 MSDN 文档中的 scrollLeft），所以对于 input，没有滚动条，scrollLeft 不起作用:(
opacity: 0 隐藏原始输入并在辅助元素中显示输入值来解决它（pointer-events: none 在这里非常有用！）。您只需使用更改事件侦听器更新此镜像值。由于我使用的是 Angular，这很容易通过两种方式进行数据绑定。
Webkit 会全力以赴地向您显示您正在输入的内容，即使您进行 css 转换，它也不会隐藏文本输入插入符号。
隐藏你正在输入的内容也是糟糕的用户体验，它会非常令人不安并且你不知道你是否输入正确。
我建议限制您可以在每个字段中输入的字符数量，例如...
<input type="text" maxlength="20" />
如果你真的需要任意数量的字符，那么你可以在字段上监听 keyup 事件，然后动态增长它。
【讨论】：
我使用了以下解决方案：
HTML
<div id="input-wrapper">
<div id="input-grid">
<input type="text" id="targa" maxlength="5" length="5" value="" />
</div>
JS
jQuery(document).ready(function($){
$('#targa').on('keypress', function() {
if (this.value.length >= 4){
return false;
}
});
});
CSS
#input-wrapper {
position: relative;
}
#input-grid{
border: 1px solid #C9CFD5;
background-image: url('../images/input-mask.jpg');
width: 200px;
height: 50px;
}
#targa {
color:#fff;
text-transform:uppercase;
border: 0 none;
width: 400px;
height: 50px;
background: transparent;
font-size: 30px;
font-family: "Courier", monospace;
letter-spacing: 28px;
text-indent: 18px;
outline: 0;
position: absolute;
top: 0;
left: 0;
}
【讨论】：