如何突出显示输入字段中的文本？ [英] How to highlight text inside an input field?
问题描述
开发一个应用程序，其中必须突出在输入中输入的字符[type = text] 。字符也可以是空格和 tabs 。这是一个原因，我不想给一个文本的颜色，而是一个背景颜色，所以我的用户知道有一些东西写在一个元素。
我没有什么可以帮助你回答，但手工制作的图片我想要实现和一个jsfiddle链接，我会尝试与不介意帮助我的人伪元素，如下所示：
input [type =text] ::第一行{
background-color：gold;
}
strong>可在 Webkit 网络浏览器上使用包括Safari，Chrome和Opera15 +。
根据 CSS level 2 spec ：
：第一行伪元素只能附加到 block
container element 。
但是， CSS第3级规范说明：
在CSS中，
:: first-line伪元素只能在将
附加到块状容器（例如块方块， inline-block ，
表格标题或table-cell。
因此，基于CSS level 3 spec :: first-line 适用于 inline-block 元素。由于基于Webkit的Web浏览器显示< input> 元素为 inline-block
其他一些网络浏览器（包括Firefox）显示<$ c $
c> input 作为 inline ，这就是为什么 :: first-line 我已经对 http://jsfiddle.net/hashem/68c97u6e/rel =nofollow>显示显示的计算样式输入 元素。
多个 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> & ::第一行
作为选项，您可以使用 contenteditable 属性，并使用外观属性应用useragent默认样式表的< < div> 元素的文本输入，如下所示：
< div contenteditable =trueclass =text-input form-control>
text with background-color
< / div>然后，您可以使用：第一行
$ b >伪元素分配背景颜色：
.text-input {
display：inline-block;
width：auto;
min-width：200px;
-webkit-appearance：textfield;
-moz-appearance：textfield;
appearance：textfield;
white-space：nowrap;
}
.text-input：第一行{
background-color：gold;
}
缺点： >
- 您必须停用
< div> Enter p>
$（'。text-input'）。keypress（function（e）{
if（event.keyCode == 10 || event.keyCode == 13）{
e.preventDefault（）;
//提交表单
}
}）;
。 -
< div>，并将该值指定给隐藏的< input>元素通过JavaScript提交表单。例如，请检查以下链接：
完全由JavaScript重新设计
您可以使用JavaScript创建/调整输入元素下方的彩色框。
在这种方法中，我们将< input> c>通过具有零宽度着色子元素的相对定位包装器，从文档正常流程使用绝对定位，并把它放在彩色框。
文本输入，相同的内容将被插入到黑色框中，因此彩色框的宽度与文本的宽度匹配。
还有一件事： / p>
输入不应该有任何边框，背景，甚至默认外观。最好用另一个元素包装彩色框本身，并将适当的样式应用于该元素，使其看起来像一个真正的输入元素。
it！
这里是排序的实施上述逻辑使用 jQuery highlightTextarea < a href =http://www.strangeplanet.fr/work/jquery-highlighttextarea/ =nofollow>插件。对于< textarea> s设计的< input> 元素可能看起来不太好。 p>
Developing an application where I must highlight characters inputted in an input[type=text]. Characters can be spaces and tabs too. That is a reason I do not want to give a color to a text, but a background color, so that my users know that there's something written inside an element.
I have got nothing to aid you answering, but the hand-made picture of what I want to achieve and a jsfiddle link where I will try along with people who don't mind helping me achieving my goal for free.
::first-line pseudo-element (for Webkit browsers)
One option is using ::first-line pseudo-element, as follows:
input[type="text"]::first-line {
background-color: gold;
}
I should note that this only works on Webkit web browsers including Safari, Chrome and Opera15+.
According to CSS level 2 spec:
5.12.1 The :first-line pseudo-element
The
:first-linepseudo-element can only be attached to a block container element.
However CSS level 3 spec states that:
7.1. The ::first-line pseudo-element
In CSS, the
::first-linepseudo-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.
Hence, based on CSS level 3 spec ::first-line is applicable to inline-block elements. Since Webkit based web browsers display <input> element as inline-block we can use the pseudo-element on inputs in order to select the text.
Whereas some other web browsers (including Firefox) display input as inline and this is why ::first-line has no effect on input elements on such web browsers.
I've made up a tiny test to show the computed style of display property of input element.
Multiple text-shadow values
This doesn't seem to be a real solution, but we can fake the effect by using multiple text-shadow values as follows:
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 (Or something fancier)
Content Editable <div> & ::first-line
As an option, you can use contenteditable attribute for a <div> element, and use appearance property to apply the useragent default stylesheet of text inputs to the <div> element, as follows:
<div contenteditable="true" class="text-input form-control">
text with background-color
</div>
Then, you can use :first-line pseudo-element to assign the background color:
.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;
}
Disadvantages:
- You have to disable the Enter key for the
<div>element and/or submit the form by pressing that via JavaScript.
jQuery version:
$('.text-input').keypress(function(e){
if (event.keyCode == 10 || event.keyCode == 13) {
e.preventDefault();
// Submit the form
}
});
You have to get the content of the content editable
<div>and assign that value to a hidden<input>element on submitting the form via JavaScript. For instance, check the link below:
Redesign entirely by JavaScript
Finally, you can use JavaScript to create/adjust the colored box beneath the input element.
In this approach, we wrap the <input> by a relative positioned wrapper having a zero-width colored child and then we remove the input from document normal flow by using absolute positioning and put that over the colored box.
As we start typing in the text input, the same content will be inserted to the nether colored box, So the width of the colored box matches the width of the text.
And one more thing:
The input shouldn't have any border, background or even default appearance. And it's better to wrap the colored box itself by another element, and apply the proper styles to that element to make it look like a real input element.
That's it!
Here is a sort of implementation of the above logic using jQuery highlightTextarea plugin. It may not look good for the <input> elements as it's designed for <textarea>s.
这篇关于如何突出显示输入字段中的文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
