textarea 的下划线文本

Question

我想为<textarea>元素的某些文本片段添加一个彩色的摆动下划线。效果类似于拼写检查器的效果。

我怎样才能用 javascript 做到这一点，可能在 jquery 的帮助下？

我对 html 标记的唯一控制是通过 javascript。我的第一个想法是为这些文本片段添加样式，但据我所知，只能为整个 textarea 元素设置样式，而不能为单个文本片段设置样式。

我知道我想要实现的目标是可能的，因为有商业软件可以实现类似的效果，但我仍在试图弄清楚所涉及的技巧是什么。

Answer 1

使用的方法是隐藏文本区域并创建一个可编辑的 div（将属性添加contenteditable="true"到 div。我不太确定浏览器兼容性）。每次按下按键时，JavaScript 都会抓取所有内容，找到拼写错误的单词，并在有问题的单词周围放置一个跨度。使用CSS，他们在单词下方放置了红色波浪线下划线（一小段红色波浪线的图像）

考虑一下，他们需要跟踪 div 中光标的位置，以防用户开始在框中间输入文本，以便在更改内容后，脚本将光标返回到正确的位置，而不是在内容块的末尾。

此外，您还需要在每次按键时更新文本区域的值。

[编辑]

这是概念证明的 jsFiddle： http: //jsfiddle.net/tEnY8/

最重要的是，当您在框中键入内容时，值将被放入文本区域，任何不正确的单词都会带有下划线并变成红色。目前它仅将最后一个单词标记为不正确。您需要注释掉该行，取消注释 for 循环，然后实现该isMispelled(String)函数。

[编辑]

这是进一步的概念证明：http://jsfiddle.net/tEnY8/4/

基本上我已经设置了一个拼写正确的单词的数组，然后循环检查该单词是否存在于数组中；如果不是，则该词可能拼写错误。