Navigation

Monday 14 May 2018

Create Directive to Allow Decimal Numbers and Number Using AngularJS



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"> 
    <title></title>
     <script src="js/angular.min.js"></script>
      <script src="js/jquery1.11.1.js"></script>
</head> 
<body> 
    <form ng-app="app" id="form1" runat="server"> 
        <div> 
            <h3> Demo to Allow Decimal Numbers and Number </h3> 
            <hr /> 
             Provide Any Decimal Number: <input type="text" 
                name="decimal" 
                class="form-control" 
                decimal-Input /> 
            <br />
            <br />
            <br />
             Provide Any Number: <input type="text" 
                name="number" 
                class="form-control" 
                number-Input />
            <hr /> 
        </div> 
    </form> 
    <script> 
        var app = angular.module('app', []); 
        app.directive('decimalInput', function () {
            return
                restrict: 'A'
                link: function (scope, elm, attrs, ctrl) { 
                    elm.on('keydown', function (event) {
                        debugger;
                        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
                        } 
                    }); 
                } 
            } 
        });
        app.directive('numberInput', function () {
            return {
                restrict: 'A',
                link: function (scope, elm, attrs, ctrl) {
                    elm.on('keydown', function (event) {
                        debugger;
                        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].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;
                        }
                    });
                }
            }
        });
        </script>
</body> 
</html>

1 comment: