获取 Textarea 的光标位置
来源:互联网 发布:淘宝内衣店铺怎么起名 编辑:程序博客网 时间:2024/05/16 19:37
在任何编辑器中,获取光标位置都是非常重要的,很多人可能认为较难,其实只要处理好浏览器的兼容,还是比较容易实现的。
下面我们一起来看看如何获取到 Textarea 元素中的光标位置(测试地址)。
首先,我们用 rangeData 对象作为数据存储,并获得焦点:
var rangeData = {start: 0, end: 0, text: "" };textarea.focus();
对于非 IE 浏览器获取选区的起始和末尾位置其实非常容易:
rangeData.start= el.selectionStart;rangeData.end = el.selectionEnd;
通过截取我们可以得到光标的选区内容:
rangeData.text = (rangeData.start != rangeData.end) ? el.value.substring(rangeData.start, rangeData.end): "";
而对于 IE 浏览器处理起来就比较麻烦了,但我们依旧可以获取到选区:
oS = document.selection.createRange();
同时还可获取 Textarea 元素的选区:
// 为了使 oR 与 oS 在同一等级上比较,请勿使用:oR = textarea.createTextRange()oR = document.body.createTextRange();oR.moveToElementText(textarea);
如果光标在 Textarea 元素内,很自然 oS.text 就是我们需要的选区内容:
rangeData.text = 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 来记录该位置数据:
rangeData.bookmark = oS.getBookmark();
下面是最重要的步骤:我们比较 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.
for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) {}rangeData.start = i;
但由于在 IE 中,Textarea 元素中的所有换行符都占 1 个字符,可以通过alert(textarea.value.length)
查看,故要对上面的代码做部分处理:
for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) { // Why? You can alert(textarea.value.length) if (textarea.value.charAt(i) == '\n') { i ++; }}rangeData.start = i;
既然得到了选区的起始位置和选区字符串的字符,很自然我们可以计算得到选区的末尾位置:
rangeData.end = rangeData.text.length + rangeData.start;
获取 Textarea 的光标位置的 getCursorPosition 函数方法整理如下:
/*** getCursorPosition Method** Created by Blank Zheng on 2010/11/12.* Copyright (c) 2010 PlanABC.net. All rights reserved.** The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license.*/function getCursorPosition(textarea) { var rangeData = {text: "", start: 0, end: 0 }; textarea.focus(); if (textarea.setSelectionRange) { // W3C rangeData.start= textarea.selectionStart; rangeData.end = textarea.selectionEnd; rangeData.text = (rangeData.start != rangeData.end) ? textarea.value.substring(rangeData.start, rangeData.end): ""; } else if (document.selection) { // IE var i, oS = document.selection.createRange(), // Don't: oR = textarea.createTextRange() oR = document.body.createTextRange(); oR.moveToElementText(textarea); rangeData.text = oS.text; rangeData.bookmark = oS.getBookmark(); // object.moveStart(sUnit [, iCount]) // Return Value: Integer that returns the number of units moved. for (i = 0; oR.compareEndPoints('StartToStart', oS) < 0 && oS.moveStart("character", -1) !== 0; i ++) { // Why? You can alert(textarea.value.length) if (textarea.value.charAt(i) == '\n') { i ++; } } rangeData.start = i; rangeData.end = rangeData.text.length + rangeData.start; } return rangeData;}
得到 Textarea 元素光标位置,当Textarea 中的光标丢失了,再设置回来就简单多了:
/*** setCursorPosition Method** Created by Blank Zheng on 2010/11/12.* Copyright (c) 2010 PlanABC.net. All rights reserved.** The copyrights embodied in the content of this file are licensed under the BSD (revised) open source license.*/function setCursorPosition(textarea, rangeData) { if(!rangeData) { alert("You must get cursor position first.") } if (textarea.setSelectionRange) { // W3C textarea.focus(); textarea.setSelectionRange(rangeData.start, rangeData.end); } else if (textarea.createTextRange) { // IE var oR = textarea.createTextRange(); // Fixbug : // In IE, if cursor position at the end of textarea, the setCursorPosition function don't work if(textarea.value.length === rangeData.start) { oR.collapse(false) oR.select(); } else { oR.moveToBookmark(rangeData.bookmark); oR.select(); } }}
测试地址:http://www.planabc.net/demo/range/textarea-cursor-position.html
扩展阅读:
- 《TextRange Prototype》
- 《TextArea Cursor Position with JavaScript》
- 获取 Textarea 的光标位置
- 获取 Textarea 的光标位置
- 获取 Textarea 的光标位置
- textarea 光标位置获取
- 获取 Textarea 的光标位置 【转】
- Javascript设置和获取Textarea的光标位置的方法
- Flex中,如何获取TextArea中的光标的位置
- JS获取textarea的光标位置并插入内容
- JS获取textArea中光标位置的方法
- js获取textarea或者input光标位置,控制光标位置
- Javascript设置和获取Textarea的光标位置的方法(亲测有用),可定位光标到某个位置
- 获取光标的位置
- 光标位置 textarea
- 获取 Textarea 元素当前的光标位置及document.selection.createRange()资料
- 获取Textarea 元素当前的光标位置及document.selection.createRange()资料
- 关于各浏览器下textarea中光标位置的获取问题详解
- 获取textarea光标选择位置和内容方法(IE, Firefox)
- javascript获取textarea光标位置,内容方法(IE, Firefox)
- mvc(不是一层只有一个控制器)
- Web网站的性能测试工具
- 分数的累加
- div边框线上添加文字
- C#多线程之ManualResetEvent和AutoResetEvent
- 获取 Textarea 的光标位置
- ognl(要从概念和结构上理解)
- CLR C++ 托管与非托管
- 乘法口诀表
- c#文件读写数据工具类
- MYSQL中TIMESTAMP类型的默认值
- 小游戏吃饭,睡觉,打豆豆,亲
- APT 攻击常用的三种电子邮件掩护潜入技巧
- 由爱而生,由生而爱,生生不息