在textarea中有什么方法获得光标的坐标位置

获得textarea光标的x,y坐标位置,貌似在javascript中没有特定方法属性。在Google上搜了一下,像这样的问题也不少,基本上以光标所处位置之前的字符长度来计算位置,但是这种做法不能准确的得到光标处于第几行。
各位牛人看看有什么好想法分享

Geo5
Geo5
463
编辑于2011-09-12
评论 (0)链接2011-08-30 

之前做小微博的时候也遇到类似问题,就是输入@时弹出好友列表的定位问题,借鉴的腾讯微博的做法
<textarea></textarea>
<div class="txtShadows"></div>

就是给textarea加个影子div[二者属性高度一致],且内容随输入保持一致,通过取影子div的位置得到光标的位置

该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (3)链接 • 2011-10-13
  • 1 支持
    貌似大多都是这么解决的。用一个隐藏的div实时模拟textarea。 但也存在一个小问题,就是当textarea中内容很多时,由于某些字符不自动换行等原因,会出现光标位置定位不准的情况。 – 小白 2011-10-13
  • 0 支持
    哦,测了测,还真有这问题,不过碰到少,难复现,没规律,瞎按键,加空格啥的好像有出了。 – 官昌战 2011-10-13
  • 0 支持
    @小白 这个问题对于我们目前的需求很重要,如何精准定位呢? – fengming 2012-12-25

写了个demo,在IE下可以实现获取Textarea中光标的位置,但是在firefox浏览器下还没有找到好的办法,可以用div模拟,但是键盘左右键移动不太好处理。
代码:

  
<body>
<textarea id="input" rows="30"
onkeyup="updateCaretPosition(this)"
onkeydown="updateCaretPosition(this)"
onmouseup="updateCaretPosition(this)"
onmousedown="updateCaretPosition(this)"
onfocus="updateCaretPosition(this)"></textarea>
<div id="output" style="position:absolute;border:1px solid;background-color:#808080"></div>
<script>
var output = document.getElementById("output");

(function(ta){
var value = ta.value;
ta._boundingLeft = ta._boundingTop = 0;
ta.value="";
ta.select();
var bound = getRangeBound(ta);
ta._boundingLeft = bound.left;
ta._boundingTop = bound.top;
ta.value = value;
})(document.getElementById("input"));

function getRangeBound(ta) {
var rect = {"left":0, "top":0, "width":0, "height":0};
if(window.getSelection){
var selection = window.getSelection();
//处理firefox
//暂时未有解决方法,只能用div模拟。
}else if(document.selection && document.selection.createRange) {
selection = document.selection;
range = selection.createRange();
rect["left"] = range.boundingLeft - ta._boundingLeft;
rect["top"] = range.offsetTop - ta._boundingTop;
}else{
alert("不支持selection");
}
return rect;
}

function updateCaretPosition(ta){
var bound = getRangeBound(ta);
output.style.left = (bound.left + ta._boundingLeft - ta.offsetLeft) + "px";
output.style.top = (bound.top + ta._boundingTop - ta.offsetTop) + "px";
trace("left:" + bound.left + "," + "top:" + bound.top);
}

function trace(str){
output.innerHTML = str;
}
</script>
</body>
该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (0)链接 • 2011-11-10

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

下面我们一起来看看如何获取到 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();
}
}

}

该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (1)链接 • 2012-01-17
  • 0 支持
    Os和Or是什么,可以给解释一下吗? – 可燃冰 2012-10-23
德问是一个专业的编程问答社区,请 登录注册 后再提交答案