angularjs强制文本框中的大写

时间:2013-05-05 20:01:12

标签: javascript angularjs uppercase angularjs-filter

我尝试过使用大写过滤器,但它不起作用。我尝试过两种方式:

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

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

第二个触发了javascript错误:

  

语法错误:令牌'test'是意外的,期待[:]

我希望当用户在文本框中键入时,文本被强制为大写。

我该怎么做?

14 个答案:

答案 0 :(得分:103)

请参阅下面的其他答案,该答案优于此答案。

这个答案基于这里的答案:How to autocapitalize the first character in an input field in 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>

答案 1 :(得分:62)

如果有人试图在现有字符串的开头输入小写字母,则接受的答案会导致问题。每按一次键后光标移动到字符串的末尾。这是解决所有问题的简单解决方案:

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/

答案 2 :(得分:34)

这个想法是在客户端将字符串显示(不转换)为大写,并在服务器端转换为大写(用户可以始终控制客户端发生的事情)。所以:

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或改变模糊方式。

答案 3 :(得分:26)

您无法在ng-model上进行过滤,因为它必须是可分配的。解决方法是解析器,或者只是ng-change。

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

这应该有用。

答案 4 :(得分:16)

与Bootstrap一起使用时,只需将text-uppercase添加到输入的类属性。

答案 5 :(得分:6)

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/

答案 6 :(得分:2)

这根本不起作用。

ng-model用于指定范围中的哪个字段/属性应绑定到模型。此外,ng-model不接受表达式作为值。 angular.js中的表达式是{{}}之间的内容。

uppercase过滤器可用于输出和允许表达式的任何地方。

你无法做你想做的事,但你可以使用CSS的text-transform来至少以大写形式显示所有内容。

如果您希望以大写字母显示文本字段的值,可以使用一些自定义JavaScript实现此目的。

在您的控制器中:

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

答案 7 :(得分:2)

不要忘记在模块中加入“ 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
        }
    };

});

  • 注意“?”在“要求:'?ngModel ',”......然后才对我的申请工作。

  • “if(inputValue){...}”没有发生未定义的错误

答案 8 :(得分:1)

使用引导程序时:

第一种方法:使用大写文本

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

第二种方法:可以在现有课程中使用的样式

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

答案 9 :(得分:0)

它只是一个替代方案,你可以在你的css中使用这个“text-transform:capitalize;”,文本条目将被大写。除非用户在任何地方用大写字母键入它。

它只是一个替代^^

答案 10 :(得分:0)

要通过Karl Zilles改进答案,这是我对其解决方案的修订。 在我的版本中,占位符不会更改为大写,如果您想对字符串执行正则表达式,也可以使用占位符。它还采用输入字符串的“类型”(null或undefined或empty):

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

答案 11 :(得分:0)

使用光标移动修复的解决方案

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

答案 12 :(得分:0)

如果要更改型号和价值,请使用:

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 />

答案 13 :(得分:-1)

我只想在控制器中使用过滤器:

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

请记住,例如,如果您打算在控制器中使用它,则需要注入此过滤器:

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