文本输入中部分字符串的不同文本颜色答案

【问题标题】：different text colour for part of string in text input文本输入中部分字符串的不同文本颜色
【发布时间】：2013-04-14 06:06:38
【问题描述】：

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

我知道可以使用元素中具有 contentedible 属性的元素来执行此操作，但 Google 在文本类型的输入中执行此操作并提供即时建议。输入中出现的第一个完成/建议。

【问题讨论】：

可以附上截图吗？
Google 不使用输入来提供建议 :)，而是使用 table。这样他们就可以在 span 元素中操作样式。
@roXon 实际上，谷歌使用搜索队列的输入和前一个输入下的另一个输入作为建议。
@roXon 好吧，如果跨度的父对象是表格之外的其他东西，您可以在跨度内操作样式。我不认为它必须是一张桌子。
stackoverflow.com/questions/3121683/…

标签： javascript jquery css

【解决方案1】：

虽然 Google 使用 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

【讨论】：

【解决方案2】：

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

【讨论】：