如何在angular js中自动大写输入字段？ [复制]

Question

我有一个输入框。

我需要自动大写这个框。

是否有任何可用的属性或者我需要在控制器上编码

我还需要将此效果应用于角度模型

Answer 1

您可以在使用 ng-change 更改该字段时使用角度过滤器 uppercase，如果您想使其成为负载资本，那么您也应该在 ng-init 中使用同样的东西

标记

<input type="text" ng-model="sample" ng-change="sample=(sample|uppercase)"/>

Answer 2

是的，我们对此有一个指令 :) 原始代码（用 TypeScript 编写）在 GitHub https://github.com/ST-Software/STAngular/blob/master/src/directives/SgUpperCase.ts

//修复光标在末尾跳转的bug

someModule.directive("sgUpperCase", [function () {
    function getCaretPosition(inputField) {
        // Initialize
        var position = 0;
        // IE Support
        if (document.selection) {
            inputField.focus();
            // To get cursor position, get empty selection range
            var emptySelection = document.selection.createRange();
            // Move selection start to 0 position
            emptySelection.moveStart('character', -inputField.value.length);
            // The caret position is selection length
            position = emptySelection.text.length;
        }
        else if (inputField.selectionStart || inputField.selectionStart == 0) {
            position = inputField.selectionStart;
        }
        return position;
    }
    function setCaretPosition(inputElement, position) {
        if (inputElement.createTextRange) {
            var range = inputElement.createTextRange();
            range.move('character', position);
            range.select();
        }
        else {
            if (inputElement.selectionStart) {
                inputElement.focus();
                inputElement.setSelectionRange(position, position);
            }
            else {
                inputElement.focus();
            }
        }
    }
    return {
        require: "^ngModel",
        restrict: "A",
        link: function (scope, elm, attrs, ctrl) {
            var toUpperCase = function (inputValue) {
                if (!inputValue)
                    return inputValue;
                var modified = inputValue.toUpperCase();
                if (modified !== inputValue) {
                    var position = getCaretPosition(elm[0]);
                    ctrl.$setViewValue(modified);
                    ctrl.$render();
                    setCaretPosition(elm[0], position);
                }
                return modified;
            };
            ctrl.$parsers.push(toUpperCase);
            toUpperCase(scope[attrs.ngModel]); //Transform initial value
        }
    };
}]);

Answer 3

看看它的工作原理..它还更新了模型...

<div ng-app="HelloApp">
    <input type="text" ng-model="name" uppercased/> {{name}}        
</div>

angular.module('components', [])
   .directive('uppercased', function() {
    return {
        require: 'ngModel',        
        link: function(scope, element, attrs, modelCtrl) {
            modelCtrl.$parsers.push(function(input) {
                return input ? input.toUpperCase() : "";
            });
            element.css("text-transform","uppercase");
        }
    };
});

angular.module('HelloApp', ['components'])

工作模型here

Answer 4

将此添加到您的controller。 $watch 将侦听对 bic 所做的任何更改并更新值。

$scope.$watch('bic', function () {
    if ($scope.bic) {
        $scope.bic = $scope.bic.toUpperCase();
    }
});

Answer 5

将类添加到输入标签中。 .大写{ 文本转换：大写“ }

i.e <input type="text" ng-model="bic" class="capitalize" id="txtbic" maxlength="11" class="span6" value="" name="">

Answer 6

这个你不需要 Jquery/Javascript。试试这个：

<input type="text" ng-model="abc"   id="myid" class="span6" value="" name="">

在 CSS 中

input {
    text-transform: uppercase;
}

JSFIDDLE DEMO

Answer 7

您实际上可以使用 CSS 来做到这一点。

input{
    text-transform: uppercase;
}

<input type="text" value="This text is auto capitalized" />