带有可自定义拼写检查波浪线的 HTML 输入文本

Question

我需要一个 HTML 输入文本，在不属于受控词汇表的单词下方带有可配置的红色波浪线。例如，如果我的词汇表是 ['foo', 'bar'] , 和文字 foo and bar在输入文本中输入，and应该加下划线，因为它不是词汇表的一部分。

我不知道从哪里开始，因为:

• 一方面，这正是谷歌搜索框的工作方式，它似乎是通过 <input type='text'> 完成的。
• 另一方面，似乎没有办法只对 <input type='text'> 中的一部分文本设置样式。 ，我在 SO 上看到一些答案，说明这可以使用 contenteditable 来完成属性。

那么，真相在哪里呢？

Answer 1

是的，有 HTML5 拼写检查属性。 这是波浪下划线 css

content: '~';
  position: absolute;
  left:0%;
  transform:scale(16,2);
  transform-origin: left