防止文本输入的水平"滚动"？

Question

我正在处理html,css和js中的格式输入字段.

一个例子是具有以下模式的日期格式字段:**.**.****.当我在输入字段中输入内容时,当我到达框的末尾时,Chrome会"向左滚动".

我怎么能阻止这个？

分隔每个字符的行由背景图像构成.使用等宽字体和集合,letter-spacing每个字符进入"字段".如果达到输入字段的大小,它将向前滚动并使用背景.

为了解决这个问题,我将输入元素放入div元素,将div元素限制为宽度并添加边框和overflow: none;div.结果:它在Firefox中运行良好,Chrome仍然将输入内容滚动到左侧.

我做错了吗？还有其他解决方案吗？是否有-webkit属性来防止这种情况？先感谢您!

Answer 1

我有同样的问题,并找到了一个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>

玩得开心!

Answer 2

Webkit 会全力以赴地向您显示您正在输入的内容，即使您进行 css 转换，它也不会隐藏文本输入插入符号。

隐藏您正在输入的内容也是很糟糕的用户体验，这会非常令人不安，并且您不知道您输入的内容是否正确。

我建议限制您可以在每个字段中输入的字符数量，例如......

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

如果您确实需要任意数量的字符，那么您可以监听现场的 keyup 事件，然后动态地增长它。