directive to put input fields in uppercase with angularJS

Question

directive to put input fields in uppercase with angularJS

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I created the following directive, for when a user types in the input to be converted to uppercase, however, when I need to edit this field to insert a word in the middle of what I had already typed, he plays the mouse cursor at the end of the input word .

Ex: Test0 Test2 When I enter another word Test0 Test1 Test2 he plays the course to the end of Test2 getting Test0 Test2 Test1.

return {
         require: 'ngModel',
         link: function(scope, element, attrs, modelCtrl) {
            var capitalize = function(inputValue) {
               if(inputValue === undefined) 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
        }
       };

angularjs

asked by anonymous 29.06.2015 / 22:05

2 answers

SQL Query, join 4 tables, 2 group_concats + conditionals, Help Errors in a Multiway MergeSort-External in C

score 1 · Answer 1

If the only goal of the directive is to turn the text into uppercase, you can use a css:

.uppercase { 
    text-transform: uppercase; 
}

CSS is lighter than AngularJs and the result will be the same.

score 0 · Answer 2

@Felipe j.lemos ,

HTML

<div ng-app="meuApp">
    <input type="text" ng-model="name" capitalizado/>         
</div>

JavaScript

angular.module('componente', [])
   .directive('capitalizado', function() {
    return {
        require: 'ngModel',        
        link: function(scope, element, attrs, modelCtrl) {
            element.css("text-transform","capitalize");
        }
    };
});

angular.module('meuApp', ['componente']);

JSFIDDLE