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

Question

开发一个应用程序，我必须突出显示在 input[type=text] 中输入的字符。字符也可以是空格 和制表符。这就是我不想给文本颜色，而是给背景颜色的原因，这样我的用户就知道元素中写了一些东西。

我没有什么可以帮助你回答的，但是我想要实现的手工图片和一个 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

The :first-line pseudo-element can only be attached to a block container element.

但是CSS level 3 spec指出:

7.1. The ::first-line pseudo-element

In CSS, the ::first-line pseudo-element can only have an effect when attached to a block-like container such as a block box, inline-block, table-caption, or table-cell.

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

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

我对 show the computed style of display property of input 做了一个小测试元素。

多个text-shadow值(value)观

这似乎不是真正的解决方案，但我们可以通过使用多个 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>并将该值分配给隐藏的 <input>通过 JavaScript 提交表单的元素。例如，检查以下链接:

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

完全由 JavaScript 重新设计

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

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

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

还有一件事:

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

就是这样!

这里是 a sort of implementation以上逻辑使用 jQuery highlightTextarea plugin .对于 <input> 可能看起来不太好为 <textarea> 设计的元素