how to angularjs auto capitalize input characters in textbox?

how to angularjs auto capitalize input characters in textbox?

Hello everyone, Today I have a requirement to auto capitalize an input text-box field and I am going to explain to how to auto capitalize an input field characters inside an AngularJs-directive form elements. Here I am using and define a angularjs directive and also define a parser function. which as give below example.

Table of context

1. HTML Template Binding code sample
2. AngularJs code sample
3. Full live example (Click for live plunker)

HTML code sample

?
1
2
3
4
5
6
<div ng-app="capitalizeApp">
  <div ng-controller="capitalizeController">
    Input Text:
    <input type="text" ng-model="name" capitalize-Input-Text>
  </div>
</div>
<div ng-app="capitalizeApp">
  <div ng-controller="capitalizeController">
    Input Text:
    <input type="text" ng-model="name" capitalize-Input-Text>
  </div>
</div>
AngularJs code sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var app = angular.module("capitalizeApp", []);
app.controller('capitalizeController', function($scope) {
  $scope.name = null;
  $scope.notifyUserName = function(name) {
    alert(name);
  };
});
app.directive('capitalizeInputText', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, capitalizeModelCtrl) {
      var capitalizeInputText = function(inputText) {
        var capitalizedValue = inputText.toUpperCase();
        if (inputText === undefined) {
          inputText = "";
        } else {
          if (capitalizedValue !== inputText) {
            capitalizeModelCtrl.$setViewValue(capitalizedValue);
            capitalizeModelCtrl.$render();
          }
        }
        return capitalizedValue;
      }
      capitalizeModelCtrl.$parsers.push(capitalizeInputText);
      capitalizeInputText(scope[attrs.ngModel]); //This is used to capitalize the initial value.
    }
  };
});
var app = angular.module("capitalizeApp", []);
app.controller('capitalizeController', function($scope) {
  $scope.name = null;
  $scope.notifyUserName = function(name) {
    alert(name);
  };
});

app.directive('capitalizeInputText', function() {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, capitalizeModelCtrl) {

      var capitalizeInputText = function(inputText) {
        var capitalizedValue = inputText.toUpperCase();

        if (inputText === undefined) {
          inputText = "";
        } else {
          if (capitalizedValue !== inputText) {
            capitalizeModelCtrl.$setViewValue(capitalizedValue);
            capitalizeModelCtrl.$render();
          }
        }

        return capitalizedValue;
      }

      capitalizeModelCtrl.$parsers.push(capitalizeInputText);
      capitalizeInputText(scope[attrs.ngModel]); //This is used to capitalize the initial value.
    }
  };
});
Full example code sample with HTML and angularjs
?
01
02
03
04
05
06
07
08
09
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
50
51
52
53
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>how to Capitalize input character in textbox angularjs?</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
  <script>
    var app = angular.module("capitalizeApp", []);
    app.controller('capitalizeController', function($scope) {
      $scope.name = null;
      $scope.notifyUserName = function(name) {
        alert(name);
      };
    });
    app.directive('capitalizeInputText', function() {
      return {
        require: 'ngModel',
        link: function(scope, element, attrs, capitalizeModelCtrl) {
          var capitalizeInputText = function(inputText) {
            var capitalizedValue = inputText.toUpperCase();
            if (inputText === undefined) {
              inputText = "";
            } else {
              if (capitalizedValue !== inputText) {
                capitalizeModelCtrl.$setViewValue(capitalizedValue);
                capitalizeModelCtrl.$render();
              }
            }
            return capitalizedValue;
          }
          capitalizeModelCtrl.$parsers.push(capitalizeInputText);
          capitalizeInputText(scope[attrs.ngModel]);
           //This is used to capitalize the initial value.
        }
      };
    });
  </script>
</head>
<body ng-app="capitalizeApp">
  <div ng-controller="capitalizeController">
    Input Text:
    <input type="text" ng-model="name" capitalize-Input-Text>
  </div>
</body>
</html>
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>how to Capitalize input character in textbox angularjs?</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.1/angular.min.js"></script>
  <script>
    var app = angular.module("capitalizeApp", []);
    app.controller('capitalizeController', function($scope) {
      $scope.name = null;
      $scope.notifyUserName = function(name) {
        alert(name);
      };
    });

    app.directive('capitalizeInputText', function() {
      return {
        require: 'ngModel',
        link: function(scope, element, attrs, capitalizeModelCtrl) {

          var capitalizeInputText = function(inputText) {
            var capitalizedValue = inputText.toUpperCase();

            if (inputText === undefined) {
              inputText = "";
            } else {
              if (capitalizedValue !== inputText) {
                capitalizeModelCtrl.$setViewValue(capitalizedValue);
                capitalizeModelCtrl.$render();
              }
            }

            return capitalizedValue;
          }

          capitalizeModelCtrl.$parsers.push(capitalizeInputText);
          capitalizeInputText(scope[attrs.ngModel]); 
           //This is used to capitalize the initial value.
        }
      };
    });
  </script>
</head>

<body ng-app="capitalizeApp">
  <div ng-controller="capitalizeController">
    Input Text:
    <input type="text" ng-model="name" capitalize-Input-Text>
  </div>
</body>

</html>
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book