javascript - angularjs force uppercase in textbox - Stack Overflow

admin管理员组

文章数量:1134247

I've tried using the uppercase filter but it does not work. I've tried doing it two ways:

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

and

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

The 2nd triggers a javascript error:

Syntax Error: Token 'test' is unexpected, expecting [:]

I want the text to be forced to uppercase as the user types in the textbox.

How can I do that?

I've tried using the uppercase filter but it does not work. I've tried doing it two ways:

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

and

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

The 2nd triggers a javascript error:

Syntax Error: Token 'test' is unexpected, expecting [:]

I want the text to be forced to uppercase as the user types in the textbox.

How can I do that?

• javascript
• angularjs
• uppercase
• angularjs-filter

Share Improve this question Follow edited May 15, 2013 at 6:11 Simon MᶜKenzie 8,6651313 gold badges5252 silver badges8181 bronze badges asked May 5, 2013 at 20:01 SamSam 14.5k3232 gold badges113113 silver badges202202 bronze badges 0

Add a comment  | 

14 Answers 14

Sorted by: Reset to default 107

Please see the other answer below, which is superior to this one.

this answer is based on the answer here: How to autocapitalize the first character in an input field in AngularJS?.

I'd imagine that what you'd want would be a parser function like this:

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>

The accepted answer causes problems if someone tries to enter a lowercase letter at the beginning of an existing string.. The cursor moves to the end of the string after each key press. Here's a simple solution that addresses all the issues:

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

Here's a fiddle: http://jsfiddle.net/36qp9ekL/1710/

The idea is to show (not transform) the string as uppercase at client side and transform into uppercase at server side (users can always control what happens at client side). So:

1) in the html:

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

here no uppercase transformation.

2) in the css:

#test {text-transform: uppercase;}

data is shown as uppercase, but actually still lowercase, if user typed in lowercase. 3) turn the string into uppercase at server side when inserting into database.

= = = = = for playing around, can try follow:

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

but I think ng-change or ng-blur ways are not necessary for your case.

You cannot make filter on ng-model since it has to be assignable. the workaround is either parser, or simply ng-change.

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

This should work.

When used with Bootstrap, just add text-uppercase to input's class attribute.

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

here is my fiddle http://jsfiddle.net/mzmmohideen/36qp9ekL/299/

This will not work at all.

ng-model is for specifying which field / property from the scope should be bound to the model. Also, ng-model does not accept an expression as value. Expressions in angular.js are things between {{ and }}.

The uppercase filter could used in the output and everywhere where expressions are allowed.

You cannot do what you want to do, but you could use CSS's text-transform to at least display everything in uppercase.

If you want to have the value of a text field in uppercase letters you can achieve this with some custom JavaScript.

In your controller:

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

Don't forget to include 'ngSanitize' in your module!

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

});

• Pay attention to "?" in "require: '?ngModel',"... only then worked my application.

• "if(inputValue) {...}" For no undefined error occurs

When using bootstrap:

First approach: Using class text-uppercase

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

Second approach: Using style which can be applied with existing class

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

Here is my stackBlitz: https://angular-nvd7v6forceuppercase.stackblitz.io

it is just an alternative , you can use this " text- transform : capitalize ; " in your css and the text entry will be capitalized. unless the user types it in capital letters everywhere.

it is just an alternative ^^

To improve the answer by Karl Zilles this is my revision of his solution. In my version the placeholder isn't changed to uppercase and works also if you want to do a regex on the string. It also take the "type" of the input string (null or undefined or 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)));
        }
    }
}
});

Solution with cursor shift fix

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

If you want to change model and value, use:

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

Then add uppercased to your html input text

<input  type="text" uppercased />

I would just use the filter itself in the controller:

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

just keep in mind that, if you you are going to use it inside a controller, for example, you need to inject this filter:

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

本文标签： javascriptangularjs force uppercase in textboxStack Overflow