Question

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

一个示例是具有以下模式的日期格式字段：**.**.****。当我在输入字段中输入内容时，当我到达框的末尾时，Chrome会向左“滚动”。

我该如何防止这种情况？

enter image description here

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

要解决此问题，我将input元素放入div元素，将div元素限制为宽度，并为div添加边框和overflow: none;。结果：它在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

感谢您对包装器的建议，我在firefox中遇到了同样的问题。在Chrome中我使用JS和scrollLeft方法修复它（另一方面，它不能在ff中工作）。在jQuery中：

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

Answer 3

Webkit会高兴地向您展示您正在键入的内容，即使您进行css转换也不会隐藏文本输入插入符号。

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

我建议限制你可以放入每个字段的字符数量，例如......

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

如果您确实需要任意数量的字符，那么您可以在字段上侦听keyup事件，然后动态扩展它。

Answer 4

我使用了以下解决方案：

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

jsfiddle live example

jsfiddle live example (full screen)

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

4 个答案: