角度光标定位问题

Angular cursor positioning issue

本文关键字：问题 定位 光标      更新时间：2023-09-26

我这里有一个奇怪的问题。我有一个指令，它只允许输入文本框中的字母。除了一个，它大部分时间都工作正常。当我尝试编辑字符串的中间部分时，它确实进行了编辑，但控件转到字符串的末尾，然后我必须再次将其放置在我要编辑的字符串位置。例VaR 测试 = 'abcdefg';当我更改除字母"G"以外的任何字母时，光标会转到整个单词的末尾。我希望它在更改的字母之后。任何帮助将不胜感激以下是零件指令代码 

link: function (scope, element, attrs, ngModel) {
            if (!ngModel) return;
            ngModel.$parsers.unshift(function (inputValue) {
            var alphas = inputValue.split('').filter(function (s) { return (s.match(/[ A-Za-z'-']/g)); }).join('');
                ngModel.$viewValue = alphas; 
                ngModel.$render();
                return alphas;
            });
        }

不确定您是否已经解决了您的问题，但我遇到了同样的问题，每次我删除输入中间的字符时，它都会跳过我到输入的末尾。

关于你的代码，我必须做

    //Checks if the setSelectionRange method is available (not IE compatible)
    //Otherwise use createTextRange() (IE compatible)
    scope.setSelectionRange = function (input, selectionStart, selectionEnd) {
      if (input.setSelectionRange) {
        input.focus();
        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();
      }
    };
    ngModelCtrl.$parsers.push(function (value) {
      //Get the position the cursor was last at
      var lastLetterPosition = element[0].selectionStart;
      element.val($filter("uppercase")(value));
      value = value.replace(/ /g, "").toLowerCase();
      //I tried to do scope.$apply() to apply the change, but a digest cycle
      //was already in progress, so scope.$evalAsync() adds the
      //change to the end of the current digest cycle instead
      //Manually set the position of the cursor to where the last position was
      scope.$evalAsync(scope.setSelectionRange(htmlElement, lastLetterPosition, lastLetterPosition));
      return value;
    });

希望对您有所帮助！

相关文章：