如何突出显示输入字段中的文本？

Question

开发一个应用程序，我必须突出显示在input[type=text] 中输入的字符。字符也可以是spaces 和tabs。这就是我不想为文本添加颜色而是背景颜色的原因，以便我的用户知道元素中写入了某些内容。

我没有什么可以帮助你回答的，但是我想要实现的手工制作的图片和一个 jsfiddle 链接，我将与那些不介意帮助我的人一起尝试achieving我的目标是免费的。

Answer 1

::first-line 伪元素 ^{（适用于 Webkit 浏览器）}

一种选择是使用::first-line伪元素，如下：

input[type="text"]::first-line {
    background-color: gold;
}

WORKING DEMO.

我应该注意，这仅适用于 Webkit web browsers，包括 Safari、Chrome 和 Opera15+。

根据CSS level 2 spec：

5.12.1 The :first-line pseudo-element

:first-line 伪元素只能附加到 block container element。

但是CSS level 3 spec 声明：

7.1. The ::first-line pseudo-element

在 CSS 中，::first-line 伪元素只有在 附加到块状容器，例如块盒，inline-block， 表格标题或表格单元格。

因此，基于 CSS level 3 规范 ::first-line 适用于 inline-block 元素。由于基于 Webkit 的网络浏览器将 <input> 元素显示为 inline-block，我们可以使用 inputs 上的伪元素来选择文本。

而其他一些网络浏览器（包括 Firefox）将input 显示为inline，这就是为什么::first-line 对此类网络浏览器上的input 元素没有影响。

我对@9​​87654329@ 元素做了一个小测试。

多个text-shadow 值

这似乎不是一个真正的解决方案，但我们可以通过使用多个text-shadow 值来伪造效果，如下所示：

input[type="text"] {
    text-shadow: 0 0 50px gold,
                 0 0 50px gold,
                 0 0 50px gold,
                 0 0 50px gold,
                 0 0 50px gold,
                 0 0 50px gold,
                 0 0 50px gold,
                 0 0 50px gold,
                 0 0 50px gold,
                 0 0 50px gold;
}

WORKING DEMO （或者什么fancier）

Content Editable <div> & ::first-line

作为一个选项，您可以将contenteditable 属性用于<div> 元素，并使用appearance 属性将文本输入的用户代理默认样式表应用于<div> 元素，如下所示：

<div contenteditable="true" class="text-input form-control">
    text with background-color
</div>

然后，您可以使用:first-line 伪元素来分配背景颜色：

.text-input {
    display: inline-block;
    width: auto;
    min-width: 200px;

    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;

    white-space: nowrap;
}

.text-input:first-line {
    background-color: gold;
}

WORKING DEMO

缺点：

• 您必须禁用 <div> 元素的 Enter 键和/或通过 JavaScript 按下该键来提交表单。

jQuery 版本：

$('.text-input').keypress(function(e){
    if (event.keyCode == 10 || event.keyCode == 13) {
        e.preventDefault();
        // Submit the form
    }
});

UPDATED DEMO.

• 您必须获取 content editable <div> 的内容，并在通过 JavaScript 提交表单时将该值分配给隐藏的 <input> 元素。例如，检查下面的链接：

  • Using HTML5, how do I use contenteditable fields in a form submission?

完全由 JavaScript 重新设计

最后，您可以使用 JavaScript 创建/调整输入元素下方的彩色框。

在这种方法中，我们将<input> 包装为具有零宽度 彩色子元素的relative 定位包装器，然后使用absolute 定位从文档正常流中删除输入并将它放在彩色盒子上。

当我们开始输入文本输入时，相同的内容将被插入到下面的彩色框中，因此彩色框的宽度与文本的宽度相匹配。

还有一件事：

输入不应有任何边框、背景甚至默认appearance。最好用另一个元素包裹彩色框本身，并为该元素应用适当的样式，使其看起来像一个真正的输入元素。

就是这样！

这里是使用 jQuery highlightTextarea plugin 的上述逻辑的a sort of implementation。它可能不适合 <input> 元素，因为它是为 <textarea>s 设计的。

Answer 2

• 要选择输入内容（带有突出显示），请使用：el.select()。
• 有关 css 手动高亮显示，请参阅 @HashemQolami 答案。