angularjs force uppercase in textbox
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.