angularjs force uppercase in textbox
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?
Solution 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>
Solution 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/