javascript - 文本输入中部分字符串的不同文本颜色

Question

当文本输入的值仍在输入字段中时，如何设置字符串的一部分样式？

我知道可以使用元素中具有 contentedible 属性的元素来做到这一点，但 Google 会在文本类型的输入中使用他们的即时建议来做到这一点。输入中出现的第一个完成/建议。

Answer 1

虽然谷歌使用类似 this 的东西

不幸的是，您不能“打开+关闭” input 元素，例如:

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

我的建议是走这条路，使用contenteditable:Live Demo .

<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 中检索元素“值”，您可以使用:

alert( this.textContent );

Example