在输入字段中设置特定文本的样式

Question

是否有可能只对输入字段的特定文本设置样式。就像SO的标签输入字段一样

假设我有一个输入字段<input value="some text"/>，是否可以仅设置文本“ some”而不是“ text”的样式？

如果没有，有什么替代方法？

Answer 1

我认为不可能在<textarea>内进行操作。解决方法是使用<div contenteditable>创建“伪”文本区域。然后，您可以使用类似的内容：

let input = document.querySelector(".input");


input.innerHTML = input.innerHTML.replace("some", `<span class="hl">some</span>`);

并将CSS应用于span类：

.hl {
  color:red;
}

More on this here

Answer 2

不幸的是，由于无法将样式应用于输入字段的全部内容，因此这是不可能的。

Here，有人提出了一个棘手的“解决方案”来模拟行为，但这远不是推荐或内置的。

Answer 3

您将无法使用input来完成此操作，因为value中的input不是您可以访问或设置样式的DOM中的元素。您可能需要使用contenteditable元素。更多信息here和here。

Answer 4

我认为您不能仅使用标记就可以做到这一点，但是有一些解决方法：

Span inside text input field?

Answer 5

您不能使用常规的<input type="text">或<textarea>元素来执行此操作，而是使用常规元素（例如<div>或<p>）来制造contenteditable ，您就拥有了html / css格式的所有自由。

<div contenteditable>
    ST<span style="color: red">A</span>CK OVERFLOW
</div>

http://jsfiddle.net/jVqDJ/

浏览器支持也非常好（IE5.5 +）。在https://developer.mozilla.org/en-US/docs/Web/HTML/Content_Editable

中了解更多信息