Html “防止水平”；滚动；文本输入的类型？

我正在用html、css和js处理一个格式输入字段

一个示例是具有以下模式的日期格式字段：

******

。当我在输入字段中键入时，当我到达框的末尾时，Chrome会向左“滚动”

我怎样才能防止这种情况

分隔每个字符的行由背景图像组成。使用单间距字体和一组

字母间距

时，每个字符进入一个“字段”。如果您达到输入字段的大小，它将向前滚动并获取背景

为了解决这个问题，我将input元素放入div元素中，将div元素限制为一个宽度，并添加了边框和

overflow:none到div。结果：它在Firefox中运行良好，Chrome仍然会将输入内容向左滚动

我做错了吗？还有其他解决办法吗？是否有一个-webkit属性来防止这种情况？提前谢谢你
 Webkit会不厌其烦地向您显示您正在键入的内容，即使您进行css转换，它也不会隐藏文本输入插入符号

隐藏您正在键入的内容也是一种糟糕的用户体验，这将非常令人不安，并且您不知道您键入的内容是否正确

我建议限制每个字段可以输入的字符数，例如

<input type="text" maxlength="20" />



如果你真的需要任意数量的字符，那么你可以在字段中侦听keyup事件，然后动态地增加它。
感谢包装器的建议，我在firefox中也遇到了同样的问题。
在Chrome中，我使用JS和scrollLeft方法修复了它（另一方面，这在ff中不起作用）。
在jQuery中：

$('input').live('keyup', function() {
    $(this).parent().scrollLeft(0);
});

我也遇到了同样的问题，并找到了一个CSS解决方案：


#输入包装器{
边框：1px实心#C9CFD5；
背景图像：url（'grid.png'）；/*垂直线的一些平铺图像*/
宽度：200px；
高度：50px；
溢出：隐藏；
}
#输入包装器输入{
边界：0无；
宽度：400px；
高度：50px；
背景：透明；
字体大小：30px；
字体系列：“信使”，单空格；
字母间距：28px；
文本缩进：18px；
}
我使用了以下解决方案：

HTML

<div id="input-wrapper">
    <div id="input-grid">
    <input type="text" id="targa" maxlength="5" length="5" value="" />
</div>

CSS

jQuery(document).ready(function($){
  $('#targa').on('keypress', function() {
    if (this.value.length >= 4){
        return false;
    }  
  });
});

  #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;
  }


我计划使用javascript跳转到第二个字段。当我限制大小时，同样的效果也会发生，因为有字母空格，他会跳入输入元素外的下一个字段。对不起，我指的是maxlength，不是size。如果使用maxlength，是否仍会发生？maxlength会限制字符数，但会将光标移动到字段的末尾。（就像你在上图中看到的）相同的效果..在最新的chrome中看起来不再有效了：嗨，我用你的方法来做这个，直到我做了大约十个空格，字母就消失了。你能帮我解决这个问题吗？你需要修改CSS。将#targa上的宽度值更改为500px。这在Chrome和FireFox中都可以，但不幸的是，
scrollLeft
仅在IE中对具有滚动条的元素起作用（检查MSDN文档中的
scrollLeft
），因此在
输入的情况下，没有滚动条，
scrollLeft
不起作用：（我现在通过使用
不透明性：0
隐藏原始输入并在助手元素中显示输入值（
指针事件：无
在这里非常有用！）解决了这个问题。您只需使用更改事件侦听器更新此镜像值。由于我使用angular，这非常容易实现双向数据绑定。