注册
登录

您现在的位置是:首页 > 学无止境

获取 Textarea 的光标位置

木木彡82 2011-02-15 13:47:00 2854人围观
获取 Textarea 的光标位置

转载自:http://www.planabc.net/2010/11/17/get_textarea_cursor_position/

在任何编辑器中,获取光标位置都是非常重要的,很多人可能认为较难,其实只要处理好浏览器的兼容,还是比较容易实现的。

下面我们一起来看看如何获取到 Textarea 元素中的光标位置(测试地址 )。

首先,我们用 rangeData 对象作为数据存储,并获得焦点:

对于非 IE 浏览器获取选区的起始和末尾位置其实非常容易:

通过截取我们可以得到光标的选区内容:

而对于 IE 浏览器处理起来就比较麻烦了,但我们依旧可以获取到选区:

同时还可获取 Textarea 元素的选区:

如果光标在 Textarea 元素内,很自然 oS.text 就是我们需要的选区内容:

并且我们可以通过 oS.getBookmark() 方法获取到选区的位置数据,该位置数据可以通过 moveToBookmark() 方法设置回去。

getBookmark : Retrieves a bookmark (opaque string) that can be used with moveToBookmark to return to the same range.

moveToBookmark : Moves to a bookmark.

我们用 rangeData.bookmark 来记录该位置数据:

下面是最重要的步骤:我们比较 oR 与 oS 的选区起始位置(使用 object . compareEndPoints ( sType , oRange ) 方法比较),如果 oR 的起始位置在 oS 之前,我们向前移动 oS 的起始位置1个字符(使用 object . moveStart ( sUnit [, iCount ]) 方法移动),一直当 oS 的起始位置在 oR 之前停止,移动的位置,则是选区的起始位置。

compareEndPoints : Compares an end point of a TextRange object with an end point of another range.

moveStart : Changes the start position of the range.

但由于在 IE 中,Textarea 元素中的所有换行符都占 1 个字符,可以通过 alert ( textarea . value . length ) 查看,故要对上面的代码做部分处理:

既然得到了选区的起始位置和选区字符串的字符,很自然我们可以计算得到选区的末尾位置:

获取 Textarea 的光标位置的 getCursorPosition 函数方法整理如下:

得到 Textarea 元素光标位置,当Textarea 中的光标丢失了,再设置回来就简单多了:

测试地址:http://www.planabc.net/demo/range/textarea-cursor-position.html

扩展阅读:

 

文章评论

  • 登录后评论

点击排行