使用 Vanilla-JS 或 Angular 输入多种颜色答案

【问题标题】：Input with multiple colors with Vanilla-JS or Angular使用 Vanilla-JS 或 Angular 输入多种颜色
【发布时间】：2018-05-04 19:57:18
【问题描述】：

输入两种颜色的最佳方式是什么？我需要附加（在 Angular 中我将为此使用管道）一个尚未输入的部分/占位符的 id，并且它的颜色应该比输入的输入颜色浅。例如。 123456XXX 用户输入 123456 后，XXX 是灰色而不是黑色？

如果它是一个跨度，我可以在后缀周围加上一个<grey>，并为其分配灰色样式，但不能包含其他 html-tags

它需要在 IE11 中运行！如果您知道可以做到这一点的插件，请随时将其作为评论发布，我可以自己查找解决方案。

【问题讨论】：

您是否尝试过使用 div 标签（而不是输入）？内容可编辑设置为true？我希望你可以使用 html 标签和类进行样式设置。
恐怕这是我必须要做的，尽管出于各种原因（所有浏览器上的本机处理等），经典输入会更好。在 Angular 中，您可以使用 NG_VALUE_ACCESSOR 访问和设置输入内容，但我认为无法将样式应用于内容
好的，我刚刚在这里看到了这个：stackoverflow.com/questions/12834939/… 看起来我在这个上不走运^^

【解决方案1】：

可能是这样的？

<div contenteditable="true">
  <span>
    Part 1
  </span>
  <span style="color: red">
     Part 2
  </span>
</div>

【讨论】：