开发一个应用程序,我必须突出显示在 input[type=text]
中输入的字符。字符也可以是空格
和制表符
。这就是我不想给文本颜色,而是给背景颜色的原因,这样我的用户就知道元素中写了一些东西。
我没有什么可以帮助你回答的,但是我想要实现的手工图片和一个 jsfiddle 链接,我将尝试与不介意帮助我的人一起尝试 achieving我的目标是免费的。
最佳答案
::first-line
伪元素(用于Webkit 浏览器)
一个选项是使用 ::first-line
伪元素,如下:
input[type="text"]::first-line {
background-color: gold;
}
我应该注意,这仅适用于 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;
}
缺点:
- 您必须为
<div>
禁用 Enter 键元素和/或通过 JavaScript 按下该表单来提交表单。
jQuery 版本:
$('.text-input').keypress(function(e){
if (event.keyCode == 10 || event.keyCode == 13) {
e.preventDefault();
// Submit the form
}
});
你必须得到content editable的内容
<div>
并将该值分配给隐藏的<input>
通过 JavaScript 提交表单的元素。例如,检查以下链接:
完全由 JavaScript 重新设计
最后,您可以使用 JavaScript 创建/调整输入元素下方的彩色框。
在这种方法中,我们包装了 <input>
通过 relative
定位具有零宽度 彩色子项的包装器,然后我们使用 absolute
从文档正常流中删除输入定位并将其放在彩色框上。
当我们开始在文本输入中输入内容时,相同的内容将被插入到下面的彩色框中,因此彩色框的宽度与文本的宽度相匹配。
还有一件事:
输入不应该有任何边框、背景甚至默认 appearance
.最好用另一个元素包裹彩色框本身,并将适当的样式应用于该元素,使其看起来像一个真正的输入元素。
就是这样!
这里是 a sort of implementation以上逻辑使用 jQuery highlightTextarea plugin .对于 <input>
可能看起来不太好为 <textarea>
设计的元素
关于html - 如何突出显示输入字段中的文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22131214/