Question

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

如何使用javascript执行此操作，可能需要jquery的帮助？

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

我知道我想要实现的目标是可能的，因为commercial software取得了类似的效果，但我仍在努力弄清楚所涉及的技巧是什么。

Answer 1

我认为这不可能在textarea中，大多数WYSIWYG编辑在线使用一个contenteditable div或iframe看起来像textarea来设置这些元素的innerHTML中的文本样式，因此显示在前端，你可以然后获取div / iframe的textContent或innerText。使用jQuery，您可以执行以下操作：


<div contenteditable='true' id='editor'>this is the wrd</div>


$('#editor').html($('#editor').html().replace("wrd", "<span style='color: red;'>wrd</span>"));

根本没有测试，但应正确设置div的样式。然后你可以使用$（'＃editor'）。text（）来检索文本值。

Answer 2

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

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

此外，您需要在每个按键上更新textarea的值。

[编辑]

这是一个概念验证的jsFiddle： http://jsfiddle.net/tEnY8/

底线，当您在框中键入时，该值将被放入textarea中，并且任何不正确的单词都带有下划线并变为红色。目前它只标记最后一个单词是不正确的。您需要对该行进行注释，取消注释for循环，并实现isMispelled(String)函数。

[编辑]

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

基本上我已经设置了一个拼写正确的单词数组，然后循环检查数组中是否存在该单词;如果没有，那么这个词可能是拼错了。

Answer 3

正如你所说，实际上不可能只编辑textarea的一行字体或属性。

相反，您链接到的网站正在做什么，它使用可编辑的DIV，并通过Javascript和一些聪明的CSS将其链接到隐藏的textarea（textarea本身是 display：none 和的能见度：隐藏; ）

我建议使用firebug来看看他们是如何做到的，因为它非常令人印象深刻。

Answer 4

他们所做的是有一个<div>元素，他们用它来做所有的样式，它看起来像一个textarea。

这篇文章可能会帮助您按照以下方式执行操作：https://stackoverflow.com/a/3536762/349012

强调textarea的文本

4 个答案: