Format (Mask) Credit Card Number in AngularJS

Last Reply 2 months ago By dharmendr

Posted 2 months ago

Hi,

I have one textbox named as textbox 

In  ineed to enter like numbers like below image

https://i.stack.imgur.com/6JKjh.jpg

Could you please kindly help me

@{
    Layout = null;
}

<html ng-app="myApp">
<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.8/angular.min.js"></script>
    <script>
    var app = angular.module("myApp", []);
    app.controller("myCntrl", ['$scope', '$http',  function ($scope, $http) {
    }]);
    </script>
</head>
<body ng-controller="myCntrl">
    <div class="container">
        <div>
            <div id="wrapper" class="clearfix">
                    <form name="userForm" novalidate>
                        <div class="form-horizontal">
                            <div class="row">
                                <div class="col-md-3">
                                    <label for="CreditCard">
                                        Credit card No
                                    </label>
                                    <input type="text" ng-model="CreditCard" name="CreditCard" class="form-control"   />
                                </div>                               
                            </div>
                           </div>
                    </form>
                </div>
            </div>
        </div>
</body>
</html>

 

You are viewing reply posted by: dharmendr 2 months ago.
Posted 2 months ago

Hi mahesh213,

Refer below example.

HTML

 

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
        app.controller("myCntrl", ['$scope', '$http', function ($scope, $http) {
            ApplyCreditCardFormat($("#txtCreditCard"));
        } ]);

        function ApplyCreditCardFormat(ele) {
            $(ele).keyup(function () {
                $(this).val($(this).val().toCardFormat());
            });

            String.prototype.toCardFormat = function () {
                return this.replace(/[^0-9]/g, "").substr(0, 16).split("").reduce(cardFormat, "");
                function cardFormat(str, l, i) {
                    return str + ((!i || (i % 4)) ? "" : " ") + l;
                }
            };
        }
    </script>
</head>
<body ng-app="myApp" ng-controller="myCntrl">
    <div class="container">
        <div>
            <div id="wrapper" class="clearfix">
                <div class="form-horizontal">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="CreditCard">
                                Credit card No
                            </label>
                            <input type="text" id="txtCreditCard" ng-model="CreditCard" name="CreditCard" class="form-control" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Demo

You can also check the below link for Credit card plugin.

https://www.jqueryscript.net/form/jQuery-Credit-Card-Input-Mask-Plugin-Credit-js.html