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

【问题标题】：how to prevent text inside an input from being overridden如何防止输入中的文本被覆盖
【发布时间】：2016-01-05 06:35:04
【问题描述】：

我正在尝试实现一个类似于 google chrome 中的搜索工作方式的 html 控件。我知道在 chrome 中它可能不是用 html 构建的，但我正在尝试实现相同的功能。

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

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

【问题讨论】：

标签： html css google-chrome search

【解决方案1】：

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

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 属性，将其链接到字段。因此，当单击它时，它会将用户引导到该字段。已编辑。

【讨论】：

【解决方案2】：

我只用 CSS 做了它的基础，请看下面的演示。

jsfiddle

* {
    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;
}

&lt;div&gt;&lt;input type="text"&gt;&lt;span&gt;etc&lt;/span&gt;&lt;/div&gt;

【讨论】：