下划线文本的textarea [英] Underlining text of a textarea

问题描述

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

我怎样才能用javascript做到这一点，可能需要jQuery的帮助？

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

我知道我试图实现的是可能的，因为有商业软件实现类似的效果，但我是仍然试图找出涉及到的技巧。

解决方案

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

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

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

[edit]

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

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

[b]

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

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

I would like to add a colored wiggly underline to certain text fragments of a <textarea> element. The effect would be similar to that of spell checkers.

How can I do this with javascript, possibly with the help of jquery?

The only control I have over the html markup is through javascript. My first thought was to add styles to those text fragments, but as far as I know, one can only style the entire textarea element, not individual text fragments.

I know what I am trying to achieve is possible, as there is commercial software achieving a similar effect, but I'm still trying to figure out what are the tricks involved.

解决方案

The approach being used is to hide the textarea and create a div that is editable (add the attribute contenteditable="true" to a div. I'm not too sure of browser compatibility). On every key press the javascript grabs all the content, locates mis-spelled words and puts a span around the offending word. Using css they put a squiggle red underline under the word (an image of a small segment of red squiggle)

Thinking about it, they would need to keep track of the location of the cursor in the div in case the user starts entering text in the middle of the box, so that after altering the contents the script returns the cursor to the correct position and not at the end of the block of content.

Also, you would need to update the value of the textarea on each keypress.

[edit]

Here is a jsFiddle of proof of concept: http://jsfiddle.net/tEnY8/

Bottom line, when you type into the box, the value is put into the textarea and any incorrect words are underlined and turned red. At the moment it only flags the last word as being incorrect. You need to comment that line out, uncomment the for loop, and implement the isMispelled(String) function.

[edit]

Here is a further proof of concept: http://jsfiddle.net/tEnY8/4/

Basically I've set up an array of correctly spelled words, then the loop checks if the word exists in the array; if it does not then the word is probably mis-spelled.

这篇关于下划线文本的textarea的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！