取得光标位置

取得光标位置

最近在项目中遇到了一个取得光标位置相关的BUG。现总结如下：

环境

• 略

BUG现象

问题很简单，画面上有一个textarea，还有一个button，当客户点击button的时候想向textarea中当前光标位置，插入一段固定的话。当然实际系统中业务比这个要复杂一些，但基本就是这么一回事。问题的关键是textarea的光标当前位置的计算。 客户在画面输入两行文字，光标停在了第二行的开始。但是文字确插入在了第一行的末尾。 这很明显是个BUG。

BUG解析

以前的代码：

info.activeElement = document.activeElement;
info.activeElement.focus();
var range = document.selection.createRange();
var objRange = info.activeElement.createTextRange();
objRange.collapse(true);
objRange.select();
range.setEndPoint("StartToStart", document.selection.createRange());
info.cursorPos = range.text.length;

问题很简单range.text的选区当中没有包含末尾的回车。

BUG解决

修改：

info.activeElement = document.activeElement;
info.activeElement.focus();
var range = document.selection.createRange();
var objRange = info.activeElement.createTextRange();
objRange.collapse(false);
objRange.select();
range.setEndPoint("StartToStart", document.selection.createRange());
info.cursorPos = nfo.activeElement.value.length - range.text.length;

以前是把光标之前的部分做成选区。再计算文字的个数。 修改后是把光标之后的部分做成选区。计算文字个数，再用总文字去减。

总结

虽然改出来了，但还是没太明白为什么。