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

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

我应该注意， {only> 适用于 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伪元素只能起作用   附加到块状容器，如块箱，内联块，   表格标题或表格单元格。

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

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

我对show the computed style of display property of input元素进行了一次微小的测试。

多个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>＆amp; ::first-line

作为选项，您可以对contenteditable元素使用<div>属性，并使用appearance属性将文本输入的useragent默认样式表应用于<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

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

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

完全由JavaScript重新设计

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

在这种方法中，我们用一个<input>定位的包装器包裹relative 零宽度彩色子包，然后我们通过使用从文档正常流中删除输入absolute定位并将其放在彩色框上。

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

还有一件事：

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

那就是它！

以上是使用 jQuery a sort of implementation highlightTextarea的上述逻辑的plugin。 <input>为<textarea>设计的{{1}}元素可能看起来不太好。

Answer 2

• 要选择输入内容（带有突出显示），请使用：el.select()。
• 有关CSS手动突出显示的信息，请参见@HashemQolami答案。

Answer 3

你使用了很多css标签。就试一试吧 。

的.text {背景色：＃F00; 要么， 背景色：红色; }

的.text {颜色：＃000; 要么， 颜色：红;}