Directive to Allow Decimal Numbers With a Single Decimal Point (.) Using AngularJS

<head runat="server">  
    <title></title>  
    <script src="angular.min.js"></script>  
    <script src="jquery-1.11.1.min.js"></script>  
</head>

<body>  
    <form ng-app="app" id="form1" runat="server">  
        <div>  
            <h3> Demo to Allow Decimal Numbers </h3>  
            <hr />  
             Provide Any Decimal Number: <input type="text"  
                name="AntiPer"  
                class="form-control"  
                allow-decimal-numbers />  
            <hr />  
        </div>  
    </form>  
</body>

<script>  
    var app = angular.module('app', []);  
    app.directive('allowDecimalNumbers', function () {  
        return {  
            restrict: 'A',  
            link: function (scope, elm, attrs, ctrl) {  
                elm.on('keydown', function (event) {  
                    var $input = $(this);  
                    var value = $input.val();  
                    value = value.replace(/[^0-9\.]/g, '')  
                    $input.val(value);  
                    if (event.which == 64 || event.which == 16) {  
                        // numbers  
                        return false;  
                    } if ([8, 13, 27, 37, 38, 39, 40, 110].indexOf(event.which) > -1) {  
                        // backspace, enter, escape, arrows  
                        return true;  
                    } else if (event.which >= 48 && event.which <= 57) {  
                        // numbers  
                        return true;  
                    } else if (event.which >= 96 && event.which <= 105) {  
                        // numpad number  
                        return true;  
                    } else if ([46, 110, 190].indexOf(event.which) > -1) {  
                        // dot and numpad dot  
                        return true;  
                    } else {  
                        event.preventDefault();  
                        return false;  
                    }  
                });  
            }  
        }  
    });

After this I created the directive with the name "allowDecimalNumbers". If you are creating any kind of directive using AngularJs then you must always check that name of that directive should be provided using '-' at your HTML page and these dashes ("-") will be replaced by capital letters in the Angular code.

Since I had applied this directive on the attribute of the TextBox I had restricted this directive using "A", in other words Attriute.

I had applied this directive on the keydown event of the texbox.

These various conditions are applied to the ASCII values of the keys to allow or to stop them. You can see that a condition is added at the end that is allowing (46,110 and 190), this condition is used to allow the decimal point in the TextBox. In any case our ASCII values are not allowed by event.preventDefault() since it will remove that character and will revert back to the previous value.

But still the user is not restricted from entering the decimal point more than once. So, to remove this problem a small code is needed to be append in this directive as in the following:

var findsDot = new RegExp(/\./g)  
var containsDot = value.match(findsDot)  
if (containsDot != null && ([46, 110, 190].indexOf(event.which) > -1)) {  
    event.preventDefault();  
    return false;  
}

Here I am determining if our TextBox already has a decimal point, if it already has a decimal point and a another character is entered with an ASCII value that matches the ASCII value of a decimal point then event.preventDefault() will remove this new decimal point.

So now our directive looks as in:​​​​​​​

app.directive('allowDecimalNumbers', function () {  
    return {  
        restrict: 'A',  
        link: function (scope, elm, attrs, ctrl) {  
            elm.on('keydown', function (event) {  
                var $input = $(this);  
                var value = $input.val();  
                value = value.replace(/[^0-9\.]/g, '')  
                var findsDot = new RegExp(/\./g)  
                var containsDot = value.match(findsDot)  
                if (containsDot != null && ([46, 110, 190].indexOf(event.which) > -1)) {  
                    event.preventDefault();  
                    return false;  
                }  
                $input.val(value);  
                if (event.which == 64 || event.which == 16) {  
                    // numbers  
                    return false;  
                } if ([8, 13, 27, 37, 38, 39, 40, 110].indexOf(event.which) > -1) {  
                    // backspace, enter, escape, arrows  
                    return true;  
                } else if (event.which >= 48 && event.which <= 57) {  
                    // numbers  
                    return true;  
                } else if (event.which >= 96 && event.which <= 105) {  
                    // numpad number  
                    return true;  
                } else if ([46, 110, 190].indexOf(event.which) > -1) {  
                    // dot and numpad dot  
                    return true;  
                } else {  
                    event.preventDefault();  
                    return false;  
                }  
            });  
        }  
    }  
});

Output

Now our application is created and we can check the output.

On running the application, a simple TextBox will be shown where decimal numbers are allowed.

If you press the numbers from anywhere in the key, they will be allowed but all the other characters except the decimal point will not be allowed to exist, even if they are special characters.

But if you try to enter more than one decimal point at any position in the TextBox then that decimal point will also not be allowed and will be removed.