angularjs force uppercase in textbox

Question

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?

Answer 1

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>

Answer 2

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/

Answer 3

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.