如何防止输入中的文本被覆盖

Question

我试图实现类似于谷歌浏览器中的搜索工作方式的html控件。我知道在chrome中它可能不是用html构建的，但我试图实现相同的功能。

搜索的工作方式是在输入到输入的文本旁边，有一个额外的文本字段，用于显示总数的当前索引。在注意到突出显示的边框是整个输入（包括输入的文本以及索引和子总计数）时，它也是值得的。此外，当输入长文本时，索引和子总指示符（例如10的0）不会被覆盖，文本本身会滚动。

有没有人有任何简单的方法来实现这个功能集？

Answer 1

我只使用CSS制作了它的基础，请参阅下面的演示。

jsfiddle

＆＃13;

＆＃13;

* {
    box-sizing: border-box;
}
div {
    position: relative;
    width: 10em;
}
input {
    width: 100%;
    padding: 4px;
    border: 1px solid;
    padding-right: 52px;
}
span {
    display: block;
    border-left: 1px solid;
    width: 50px;
    text-align: center;
    position: absolute;
    right: 0;
    top: 2px;
}

＆＃13;

<div><input type="text"><span>etc</span></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

一个简单的方法是在输入中添加填充，并将要保留的文本放在上面。用pogramming重写输入值。

HTML

<div class="form-text">
  <input type=text placeholder="0 of 0" id="youridhere"/>
  <label for="youridhere" class="static-value">Get this label to appear</label>
</div> 

CSS

.form-text{
    position:relative;
}
input{
    padding:5px 5px 5px 150px;
}
.static-value{
    position:absolute;
    left:10px;
    font-size:0.85em;
    top:9px;
}

Pen of it working

这是最简单的解决方案，但您可以使用javascript找到其他更好的结果和最佳做法。我认为这就像检测按下的键并以编程方式将其添加到字符串而不是标准的浏览器行为。

我喜欢这种基于CSS的解决方案，因为您可以自定义固定文本，而不需要更改输入字段的标准行为。

--------编辑--------

实际上，最好的解决方案是使用label元素，使用for属性将其链接到字段。因此，当点击它时，它会引导用户进入该领域。编辑。