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

Question

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

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

Answer 1

虽然谷歌使用这样的东西

不幸的是，您不能“打开+关闭”这样的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 );

例子

Answer 2

就用户体验而言，我认为最好的用户体验不是完成用户输入的内容，而是在输入下方显示建议/已完成的选项。