In the lines of css text-transform property, here are three directives that would transform the text in the input as you type/paste.
The code takes care of the cursor position as well.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
 app .service('textTransformService', function () {
        return {
            transform: function (element, ngModelController, callBack) {
                element.on('input', function () {
 
                    var currentViewValue = ngModelController.$viewValue;
                    var modifiedViewValue = callBack(currentViewValue);
 
                    var start = this.selectionStart;
                    var end = this.selectionEnd + modifiedViewValue.length - currentViewValue.length;
 
                    ngModelController.$setViewValue(modifiedViewValue);
                    ngModelController.$render();
                    this.setSelectionRange(start, end);
                });
            }
        };
    })
    .directive('textTransformUppercase', ['textTransformService', function (srvc) {
        return {
            restrict: 'A',
            require: '?ngModel',
            link: function (scope, element, attrs, ngModelController) {
                srvc.transform(element, ngModelController, angular.uppercase);
            }
        };
    }]).directive('textTransformLowercase', ['textTransformService', function (srvc) {
        return {
            restrict: 'A',
            require: '?ngModel',
            link: function (scope, element, attrs, ngModelController) {
                srvc.transform(element, ngModelController, angular.lowercase);
            }
        };
    }]).directive('textTransformCapitalize', ['textTransformService', function (srvc) {
        return {
            restrict: 'A',
            require: '?ngModel',
            link: function (scope, element, attrs, ngModelController) {
                function capitalizeCallback(currentViewValue) {
                    function capitalize(txt) {
                        return angular.uppercase(txt.charAt(0)) + txt.substr(1);
                    }
                    return currentViewValue.replace(/\w\S*/g, capitalize);
                }
                srvc.transform(element, ngModelController, capitalizeCallback);
            }
        };
    }]);
“AngularJS: The superheroic JS Framework”
-AngularJS Team

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>