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

Question

开发一个应用程序,我必须突出显示输入的字符input[type=text].字符可以spaces和tabs太.这是我不想为文本赋予颜色的原因,而是背景颜色,以便我的用户知道在元素内部写了一些东西.

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

Answer 1

::first-line伪元素^{(用于Webkit浏览器)}

一种选择是使用::first-line伪元素,如下所示:

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

工作演示.

我应该注意,这只适用于Webkit Web浏览器,包括Safari,Chrome和Opera15 +.

根据CSS 2级规范:

5.12.1:第一行伪元素

所述:first-line伪元素只能连接到一个块容器元素.

但CSS级别3规范指出:

7.1.:: first-line伪元素

在CSS中,::first-line伪元素只有在附加到块状容器(例如块框,内联块,表格标题或表格单元格)时才能生效.

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

而其他一些Web浏览器(包括Firefox)显示input为inline,这就是为什么对这些Web浏览器::first-line上的input元素没有影响的原因.

我做了一个小测试来显示displayinput元素的计算属性.

多个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;
}

工作演示 (或更高级的东西)

内容可编辑 <div>&::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;
}

工作演示

缺点:

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

jQuery版本:

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

更新的演示.

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

  • 使用HTML5,如何在表单提交中使用contenteditable字段？

完全由JavaScript重新设计

最后,您可以使用JavaScript创建/调整input元素下方的彩色框.

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

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

还有一件事:

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

而已!

这是使用jQuery highlightTextarea插件的上述逻辑的一种实现.对于元素而言,它可能看起来不太好,因为它是为s 设计的. <input><textarea>