[英]What is moving my cursor position?
I have code that inserts a string into the middle of another string in a text input box. 我有将一个字符串插入文本输入框中另一个字符串中间的代码。 I want to put the cursor a the end of the string I just inserted.
我想将光标放在刚插入的字符串的末尾。 I can see that the cursor position is correct after I place it.
放置后,我可以看到光标位置正确。 But, by the time the page has finished rendering, the cursor is at the end of the input box.
但是,当页面完成渲染时,光标将位于输入框的末尾。
I am guessing something else is touching the data after I place it. 我猜测放置数据后,还有其他东西正在接触数据。 I am unfamiliar with the code base.
我不熟悉代码库。 Any pointers on how to track this down?
关于如何追踪这一点的任何指示? Is there a selection changed event?
是否有选择更改事件?
I borrowed the code to do the positioning from here: Set Cursor Position in Textarea using AngularJS 我从此处借用代码进行定位: 使用AngularJS在Textarea中设置光标位置
Here is my code: 这是我的代码:
$scope.insertItem = function (insertText) {
var currentText= $scope.markup;
// The text is correctly stitched together. No issues here
currentText = currentText.substr(0, $scope.curentPosition) + insertText + currentText.substr($scope.curentPosition);
$scope.markup = currentText;
// The caretPos is correctly calculated here
$scope.caretPos = $scope.curentPosition + insertText.length;
document.getElementById("markup").focus();
$scope.setCaretToPos("markup", $scope.caretPos);
}
$scope.setCaretToPos = function (fieldName, caretPos) {
$scope.setSelectionRange(document.getElementById(fieldName), caretPos, caretPos);
};
$scope.setSelectionRange = function (input, selectionStart, selectionEnd) {
if (input.setSelectionRange) {
// The code comes down this path
input.focus();
// document.getElementById("markup").selectionStart is correct after this lone
input.setSelectionRange(selectionStart, selectionEnd);
}
else if (input.createTextRange) {
var range = input.createTextRange();
range.collapse(true);
range.moveEnd('character', selectionEnd);
range.moveStart('character', selectionStart);
range.select();
}
};
In case anyone runs into this. 万一有人碰到这个。 I assume a watcher on this page was re-rendering the input after I placed the cursor where I wanted it.
我假定将光标放在所需的位置后,此页面上的观察者正在重新呈现输入。 Instead of trying to figure out what was doing that and change the order of watchers, which would likely be fragile, I decided to have the cursor placed after the page rendered.
我决定尝试将光标放在页面渲染之后,而不是试图弄清楚正在执行的操作并更改观察者的顺序(这可能很脆弱)。 Searching around, the solution to have something execute after page rendering was to use $timeout with a timeout value of 0 (seems like a huge hack to me).
到处搜索,在页面渲染后执行某些操作的解决方案是使用$ timeout,并将其timeout值设置为0(对我来说似乎是一个巨大的hack)。 So, something like the following:
因此,如下所示:
$timeout(function () {
$scope.setCaretToPos("markup", $scope.caretPos) },
0);
You will need to inject $timeout into your controller. 您需要将$ timeout注入控制器。 Something like:
就像是:
ctrl.$inject = ['$scope', '$timeout'];
var ctrl = function ($scope, $timeout)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.