取得光标位置

取得光标位置

取得光标位置

最近在项目中遇到了一个取得光标位置相关的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;

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

总结

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

原文地址:https://www.cnblogs.com/tjpanda88/p/2199662.html