使用AngularJS在输入中设置插入位置

一尘不染

使用AngularJS在输入中设置插入位置

angularjs

我需要更改输入的插入符号位置，在该位置添加给定的数字（示例）。

app.controller('MainCtrl', function($scope, $element, $timeout, $filter) {
  //$scope.val = '12';
  $scope.$watch('val', function(newValue, oldValue) {
    if (!isNaN(newValue)) {
      if (newValue.length > 3) {
        //Set Caret Position  
      }
    }
  });
});

是否可以执行类似此示例的操作？

我需要例如：

输入：1234。

因此插入符号的位置将为2。

新数字：9

决赛：12934

提前致谢。

阅读 178

2020-07-04

共1个答案

一尘不染

我认为这类情况在指令中看起来更好。例如：

app.directive('caret', function() {

    function setCaretPosition(elem, caretPos) {
        if (elem !== null) {
            if (elem.createTextRange) {
                var range = elem.createTextRange();
                range.move('character', caretPos);
                range.select();
            } else {
                if (elem.setSelectionRange) {
                    elem.focus();
                    elem.setSelectionRange(caretPos, caretPos);
                } else
                    elem.focus();
            }
        }
    }

    return {
        scope: {value: '=ngModel'},
        link: function(scope, element, attrs) {
            var caret = Number(attrs.caret);
            scope.$watch('value', function(newValue, oldValue) {
                if (newValue && newValue != oldValue && !isNaN(newValue) && newValue.length > (caret + 1)) {
                    setCaretPosition(element[0], caret);
                }
            });
        }
    };
});

用法：

<input ng-model='val' caret="2" />

我setCaretPosition从这个答案中使用了跨浏览器光标定位的功能。

演示：http :

//plnkr.co/edit/5RSgzvyd8YOTaXPsYr8A?p=preview

2020-07-04