您现在的位置是:首页 > 学无止境
获取 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
扩展阅读:
文章评论
- 登录后评论
点击排行
-
php-fpm安装、配置与优化
转载自:https://www.zybuluo.com/phper/note/89081 1、php中...
-
centos下postgresql的安装与配置
一、安装(以root身份进行)1、检出最新的postgresql的yum配置从ht...
-
Mysql的大小写敏感性
MYSQL在默认的情况下查询是不区分大小写的,例如:CREATE TABLE...
-
关于URL编码
转载自:http://www.ruanyifeng.com/blog/2010/02/url_encoding....
-
header中的Cache-control
网页的缓存是由HTTP消息头中的“Cache-control”来控制的,常见的...