angularjs在文本框中强制大写

我尝试使用大写过滤器，但它不起作用。我尝试过两种方法：

<input type="text" ng-model="test" uppercase/>

和

<input type="text" ng-model="{{test | uppercase}}"/>

第二个触发JavaScript错误：

语法错误：令牌'test'是意外的，预期为[：]

我希望当用户在文本框中键入内容时将文本强制大写。

我怎样才能做到这一点？

请参阅下面的另一个答案，该答案优于此答案。

此答案基于以下答案：如何在AngularJS的输入字段中自动大写第一个字符？。

我以为您想要的是一个解析器函数，如下所示：

angular
  .module('myApp', [])
  .directive('capitalize', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, modelCtrl) {
        var capitalize = function(inputValue) {
          if (inputValue == undefined) inputValue = '';
          var capitalized = inputValue.toUpperCase();
          if (capitalized !== inputValue) {
            // see where the cursor is before the update so that we can set it back
            var selection = element[0].selectionStart;
            modelCtrl.$setViewValue(capitalized);
            modelCtrl.$render();
            // set back the cursor after rendering
            element[0].selectionStart = selection;
            element[0].selectionEnd = selection;
          }
          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="myApp">
  <input type="text" ng-model="name" capitalize>
</div>

如果有人尝试在现有字符串的开头输入小写字母，则可接受的答案会引起问题。每按一次键，光标就会移到字符串的结尾。这是解决所有问题的简单解决方案：

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");
        }
    };
})

这是一个小提琴：http : //jsfiddle.net/36qp9ekL/1710/

这个想法是在客户端将字符串显示为大写（而不转换），而在服务器端将其转换为大写（用户始终可以控制客户端发生的事情）。所以：

1）在html中：

<input id="test" type="text" ng-model="test">

这里没有大写转换。

2）在css中：

#test {text-transform: uppercase;}

如果用户以小写形式输入，则数据显示为大写，但实际上仍为小写。3）在插入数据库时​​，在服务器端将字符串变成大写。

= = = = = =可以尝试以下操作：

<input type="text" ng-model="test" ng-change="test=test.toUpperCase();">
<input type="text" ng-model="test" ng-blur="test=test.toUpperCase();">

但我认为ng-change或ng-blur方法对于您的情况不是必需的。

您不能对ng-model进行过滤，因为它必须是可分配的。解决方法是解析器，或者只是ng-change。

<input ng-model="some" ng-change="some = (some | uppercase)"  />

这应该工作。

与Bootstrap结合使用时，只需添加text-uppercase到输入的class属性即可。

one of the simple way is,
<input type="text" ng-model="test" ng-change="upper(test)/>

just do below 2 line code in your js file,
$scope.upper = function(test){
$scope.test = test.toUpperCase();
}

这是我的小提琴http://jsfiddle.net/mzmmohideen/36qp9ekL/299/

这根本不起作用。

ng-model用于指定范围中的哪个字段/属性应绑定到模型。另外，ng-model也不接受表达式作为值。angular.js中的表达式是介于{{和之间的东西}}。

该uppercase过滤器可以在输出以及允许表达式的任何地方使用。

您无法做您想做的事，但是可以使用CSStext-transform至少显示所有大写字母。

如果要使用大写字母显示文本字段的值，则可以使用一些自定义JavaScript来实现。

在您的控制器中：

$scope.$watch('test', function(newValue, oldValue) {
  $scope.$apply(function() {
    $scope.test = newValue.toUpperCase();
  }
});

不要忘记在模块中包含“ ngSanitize ”！

app.directive('capitalize', function() {
    return {
        restrict: 'A', // only activate on element attribute
        require: '?ngModel',
        link : function(scope, element, attrs, modelCtrl) {
            var capitalize = function(inputValue) {
                if(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
        }
    };

}）;

• 注意“？” 在“ require：' ？ngModel '，”中...才使我的应用程序工作。

• “ if（inputValue）{...}”不会发生未定义的错误

使用引导程序时：

第一种方法：使用文本大写的类

<input  type="text" class="text-uppercase" >

第二种方法：使用可以应用于现有类的样式

<input  type="text" class="form-control" style="text-transform: uppercase;">

这是我的stackBlitz：https ://angular-nvd7v6forceuppercase.stackblitz.io

这只是一种选择，您可以在CSS中使用此“ text-transform：大写;”，文本条目将大写。除非用户到处都用大写字母键入它。

这只是一个替代^^

为了改善Karl Zilles的答案，这是我对他的解决方案的修订。在我的版本中，占位符不会更改为大写，并且如果您想对字符串进行正则表达式也可以使用。它还采用输入字符串的“类型”（空，未定义或空）：

var REGEX = /^[a-z]+$/i;
myApp.directive('cf', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$validators.cf = function(modelValue, viewValue) {
            ctrl.$parsers.push(function(input) {
                elm.css("text-transform", (input) ? "uppercase" : "");
                return input ? input.toUpperCase() : input;
            });
            return (!(ctrl.$isEmpty(modelValue)) && (REGEX.test(viewValue)));
        }
    }
}
});

光标移动解决方案

.directive('titleCase', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function (scope, element, attrs, modelCtrl) {
                var titleCase = function (input) {
                    let first = element[0].selectionStart;
                    let last = element[0].selectionEnd;
                    input = input || '';
                    let retInput = input.replace(/\w\S*/g, function (txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); });
                    if (input !== retInput) {
                        modelCtrl.$setViewValue(retInput);
                        attrs.ngModel = retInput;
                        modelCtrl.$render();
                        if (!scope.$$phase) {
                            scope.$apply(); // launch digest;
                        }
                    }
                    element[0].selectionStart = first;
                    element[0].selectionEnd = last;
                    return retInput;
                };
                modelCtrl.$parsers.push(titleCase);
                titleCase(scope[attrs.ngModel]);  // Title case  initial value
            }
        };
    });

如果要更改模型和价值，请使用：

angular.module('MyApp').directive('uppercased', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            element.bind("blur change input", function () {
                ngModel.$setViewValue($(this).val().toUpperCase());
                $(this).val($(this).val().toUpperCase());
            });
            element.css("text-transform","uppercase");
        }
    };
});

然后将大写字母添加到您的html输入文本中

<input  type="text" uppercased />

我只是在控制器中使用过滤器本身：

 $filter('uppercase')(this.yourProperty)

请记住，例如，如果要在控制器中使用它，则需要注入以下过滤器：

app.controller('FooController', ['$filter', function($filter) ...