How to autocapitalize an input field in angular js?

Question

I have an input box.

I need to autocapitalize this box.

Is there any properties avaliable for this or do I need to code on controller

i also need that this effect is applyed in angular model

Answer 1

Yes, we have a directive for this :) The original code (written in TypeScript) is on GitHub https://github.com/ST-Software/STAngular/blob/master/src/directives/SgUpperCase.ts

//Fixed bug with cursor jumping at the end

someModule.directive("sgUpperCase", [function () {
    function getCaretPosition(inputField) {
        // Initialize
        var position = 0;
        // IE Support
        if (document.selection) {
            inputField.focus();
            // To get cursor position, get empty selection range
            var emptySelection = document.selection.createRange();
            // Move selection start to 0 position
            emptySelection.moveStart('character', -inputField.value.length);
            // The caret position is selection length
            position = emptySelection.text.length;
        }
        else if (inputField.selectionStart || inputField.selectionStart == 0) {
            position = inputField.selectionStart;
        }
        return position;
    }
    function setCaretPosition(inputElement, position) {
        if (inputElement.createTextRange) {
            var range = inputElement.createTextRange();
            range.move('character', position);
            range.select();
        }
        else {
            if (inputElement.selectionStart) {
                inputElement.focus();
                inputElement.setSelectionRange(position, position);
            }
            else {
                inputElement.focus();
            }
        }
    }
    return {
        require: "^ngModel",
        restrict: "A",
        link: function (scope, elm, attrs, ctrl) {
            var toUpperCase = function (inputValue) {
                if (!inputValue)
                    return inputValue;
                var modified = inputValue.toUpperCase();
                if (modified !== inputValue) {
                    var position = getCaretPosition(elm[0]);
                    ctrl.$setViewValue(modified);
                    ctrl.$render();
                    setCaretPosition(elm[0], position);
                }
                return modified;
            };
            ctrl.$parsers.push(toUpperCase);
            toUpperCase(scope[attrs.ngModel]); //Transform initial value
        }
    };
}]);

Answer 2

You could use angular filter uppercase on change of that field using ng-change, If you want to make it capital on load then you should to same thing in ng-init too

Markup

<input type="text" ng-model="sample" ng-change="sample=(sample|uppercase)"/>

Answer 3

Add this in your controller. $watch will listen for any changes made on bic and will update the value.

$scope.$watch('bic', function () {
    if ($scope.bic) {
        $scope.bic = $scope.bic.toUpperCase();
    }
});

Answer 4

You can actually do this with CSS.

input{
    text-transform: uppercase;
}

<input type="text" value="This text is auto capitalized" />

Answer 5

You dont need Jquery/Javascript for this one. Try this:

<input type="text" ng-model="abc"   id="myid" class="span6" value="" name="">

In CSS

input {
    text-transform: uppercase;
}

JSFIDDLE DEMO

Answer 6

Add class into input tag. .capitalize { text-transform: uppercase" }

i.e <input type="text" ng-model="bic" class="capitalize" id="txtbic" maxlength="11" class="span6" value="" name="">

Answer 7

Check out this its working.. it also updates model...

<div ng-app="HelloApp">
    <input type="text" ng-model="name" uppercased/> {{name}}        
</div>

angular.module('components', [])
   .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");
        }
    };
});

angular.module('HelloApp', ['components'])

Working model here