文本输入中字符串的一部分的不同文本颜色 [英] different text colour for part of string in text input

问题描述

如果字符串的一部分是文本输入的值，它仍然在输入字段中，我如何设置它的样式？

How can I style part of a string that is the value of a text-input while it is still in the input-field?

我知道可以做的事情这个元素中有一个具有contentedible属性的元素，但Google会在输入带有即时建议的文本类型中进行此操作。第一个完成/建议出现在输入中。

I know one can do this with an element with a contentedible attribute in an element, but Google does it in an input of type text with their instant suggestions. The first completion / suggestion appearing in the input.

推荐答案

虽然Google使用类似 这个

While Google uses something like THIS

不幸的是你不能打开+关闭一个输入元素，如：

Unfortunately you cannot " open + close " an input element like:

<input> <span>Bold</span> normal </input>

我建议采用这种方式 < a href =http://jsbin.com/upowow/2/edit =nofollow> LIVE DEMO 使用 contenteditable 。

<div id="input" contenteditable="true"><span>This is </span> quite cool!</div>

CSS样本：

#input{
  font-family:Arial, Helvetica, sans-serif;
  border:1px solid #ccc;
  background:#eee;
  height:20px;
  width:200px;
  padding:7px;
  color:#888;
}
#input span{
  color:#444;
  font-weight:bold;
}

比在JS中检索元素value;）你可以使用：

Than in JS to retrieve the element "value" ;) you can use:

alert( this.textContent );

示例

这篇关于文本输入中字符串的一部分的不同文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！