6

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

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

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

我知道我想要实现的目标是可能的，因为有商业软件可以达到类似的效果，但我仍在试图找出其中涉及的技巧。

4

4 回答 4

3

我认为这在 textarea 中是不可能的，大多数 WYSIWYG 在线编辑器使用 contenteditable div 或 iframe，使其看起来像 textarea 以设置这些元素的 innerHTML 中的文本样式，因此显示在前端，然后您可以获得 textContent或 div/iframe 的 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() 来检索文本值。

于 2012-09-19T10:41:04.453 回答
3

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

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

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

[编辑]

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

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

[编辑]

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

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

于 2012-09-19T10:42:41.777 回答
2

正如您所说，实际上不可能只编辑文本区域的一行的字体或属性。

相反，您链接到的网站正在做什么，它使用可编辑的 DIV，并通过 Javascript 和一些巧妙的 CSS 将其链接到隐藏的文本区域（文本区域本身是display:none和visibility:hidden;）

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

于 2012-09-19T10:39:02.763 回答
2

他们所做的是拥有一个<div>用于进行所有样式设置的元素，它看起来就像一个文本区域。

这篇文章可能会帮助您按照这些思路做一些事情：https ://stackoverflow.com/a/3536762/349012

于 2012-09-19T10:39:25.567 回答