Question

我正在开发一个具有＆＃39; inputText＆＃39;的应用程序，这个＆＃39;输入＆＃39;我正在实施一项政策，以便将这些词语大写。但是，在输入＆＃39;之后插入了几个单词。我需要编辑它们，鼠标光标移动到最后一个单词的最后一个字母，我该如何解决？

注意：我使用以下指令：

return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
        var capitalize = function(inputValue) {
           if(inputValue == undefined) inputValue = '';
           var capitalized = inputValue.toUpperCase();
           if(capitalized !== inputValue) {
               modelCtrl.$setViewValue(capitalized);
               modelCtrl.$render();
            }         
            return capitalized;
         };
         modelCtrl.$parsers.push(capitalize);
         capitalize(scope[attrs.ngModel]);  // capitalize initial value
    }
};

Answer 1

我认为最简单的方法是在将所有内容设为大写之前存储光标位置，然后恢复旧位置。

光标跳到最后，因为在输入字段中替换了完整的模型/文本。

请查看下面的演示或jsfiddle。

angular.module('demoApp', [])
    .controller('mainController', function ($scope) {
    $scope.text = 'hello world';
})
    .directive('capitalize', function () {
    return {
        require: 'ngModel',
        link: function (scope, element, attrs, modelCtrl) {
            var caretPos,
            capitalize = function (inputValue) {
                caretPos = element[0].selectionStart; // save current caret position
                
                //console.log('curPos before change', caretPos);
                //if (inputValue == undefined) inputValue = '';
                var capitalized = inputValue.toUpperCase();
                //console.log(capitalized, inputValue);
                if (capitalized !== inputValue) {
                    modelCtrl.$setViewValue(capitalized);
                    modelCtrl.$render();
                    element[0].selectionStart = caretPos; // restore position
                    element[0].selectionEnd = caretPos;
                }
                return capitalized;
            };
            modelCtrl.$parsers.push(capitalize);

            capitalize(scope[attrs.ngModel]); // capitalize initial value
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
    <input ng-model="text" capitalize=""/>
    {{text}}
</div>

使用angularjs大写输入 - 保持光标位置

1 个答案: