event.keyCode is not working using angular directive.?

Question

I have restrict for a text field in html.In this way went to developed a directive for allow only numbers even copy and paste also restriction.but I am getting some problem when copy and paste a number even though not allowing.because last keyup in ctrl+v is v thats why not allowing.I used below code.I wanna some condition based allowed to alphabet thats why I used type="text".

enter link description here

<input type="text" min="0" name="inputName" ng-model="myModel" dl-enter-Num="closeModalWindow();" >

app.directive('dlEnterNum', function() {
    return function($scope, element, attrs) {
        element.bind("keydown keypress paste", function(event) {
            var keyCode = event.which || event.keyCode;
            if($scope.documentTypeNumber==1 || $scope.documentTypeNumber ==2){
                var keys={
                        'up': 38,'right':39,'down':40,'left':37,'space':8,'ctrl':17,
                        'escape':27,'tab':9,'enter':13,'del':46,
                        '0':48,'1':49,'2':50,'3':51,'4':52,'5':53,'6':54,'7':55,'8':56,'9':57
                    };
                    for(var index in keys) {
                        if (!keys.hasOwnProperty(index)) continue;
                        if (event.charCode==keys[index]||keyCode==keys[index]) {
                            if(keyCode==39 || keyCode==46 || keyCode==38 || keyCode==37 || keyCode==40 || keyCode==64){

                            }else{
                            return; //default event
                            }
                        }
                    }   
                    event.preventDefault();
            }else if($scope.documentTypeNumber==6){
                if (event.shiftKey && event.keyCode < 65 && event.keyCode > 90) {
                    event.preventDefault();
                }
                if (event.keyCode == 46 ||  (event.keyCode>90 && event.keyCode<97)) {
                    event.preventDefault();
                }
                else {
                    if (event.keyCode < 65) {
                        if ((event.keyCode != 32 && event.keyCode < 44) || event.keyCode > 57 || event.keyCode ==46 || event.keyCode ==47) {
                            event.preventDefault();
                        }
                    }
                    else {
                        if (event.keyCode < 65 || event.keyCode > 122) {
                            event.preventDefault();
                        }
                    }
                }
            }
        });
    };
});

can u suggest how to use regex in above directive for numbers. — Maxi
– Maxi, Commented Jun 10, 2017 at 12:22
Note that one event named "input" will cover the 3 events shown — charlietfl
– charlietfl, Commented Jun 10, 2017 at 12:24
if $scope.documentTypeNumber==1 || $scope.documentTypeNumber==2.in this case want to allow numbers only.but $scope.documentTypeNumber==6 in this case aloow lettrs — Maxi
– Maxi, Commented Jun 10, 2017 at 12:26

Sampgun · Accepted Answer · 2017-06-13 07:48:48Z

1

This is the best you can do

.directive("dlEnterNum", ["$timeout", function ($timeout) {
    return {
        restrict: "A",
        scope: false,
        link: function (scope, element) {
            var ctrlDown = false,
                ctrlKey = 17,
                cmdKey = 91,
                vKey = 86,
                cKey = 67;

            $(document).off("keydown.enterNum").on("keydown.enterNum", function (e) {
                if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = true;
            }).off("keyup.enterNum").on("keyup.enterNum", function (e) {
                if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = false;
            });

            var pasting = function (keyCode) {
                return ctrlDown && (keyCode == vKey || keyCode == cKey);
            };

            var isDigit = function (keyCode) {
                return (keyCode >= 48 && keyCode <= 57) || (keyCode >= 96 && keyCode <= 105);
            };

            var noCharKeys = {
                up: 38,
                right: 39,
                down: 40,
                left: 37,
                backspace: 8,
                space: 32,
                escape: 27,
                tab: 9,
                enter: 13,
                del: 46
            };

            element.on("keydown", function (event) {
                var keyCode = event.which || event.keyCode;
                console.info("DOCUMENT TYPE: " + scope.documentTypeNumber);
                console.info("KEY CODE: " + keyCode);
                switch (scope.documentTypeNumber) {
                    case 1:
                    case 2:
                    {
                        //CHECK IF ALL DIGITS AFTER PASTE
                        if (pasting(keyCode)) {

                            $timeout(function () {
                                var isNumeric = /^\d+$/.test(scope.myModel);
                                if (!isNumeric) {
                                    scope.myModel = "";
                                }
                            });

                            return true;
                        }

                        //CHECK FOR DIGITS INPUT
                        if (!isDigit(keyCode)) {
                            event.preventDefault();
                        }

                        break;

                    }
                    case 6:
                    {
                        if (pasting(keyCode)) {

                            $timeout(function () {
                                var isAlphabetic = /^[A-Za-z]+$/.test(scope.myModel);
                                if (!isAlphabetic) {
                                    scope.myModel = "";
                                }
                            });

                            return true;
                        }

                        //CHECK FOR DIGITS INPUT
                        if (isDigit(keyCode)) {
                            event.preventDefault();
                        }

                        break;
                    }
                } //SWITCH CLOSING BRACKET

                //CHECK FOR OTHER KEYS
                for (var key in noCharKeys) {
                    if (event.charCode == noCharKeys[key] || keyCode == noCharKeys[key]) {
                        event.preventDefault();
                    }
                }

            });
        }
    };
}]);

EDIT-1 13/06:

working fiddle ==> https://jsfiddle.net/tonysamperi/gbzu9d8r/

edited Jun 13, 2017 at 7:48

answered Jun 10, 2017 at 12:23

Sampgun

3,0323 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Maxi Over a year ago

No.the above code allows some conditions.for example $scope.documentTypeNumber==6 in this case we allow to alphabet so,ng-pattern not working

Maxi Over a year ago

In that am getting type of document.if 1 or 2 then allow numbers else 6 then allow alphabets.

Maxi Over a year ago

when we click 1 and 2 option then allow numbers only with copy and paste also

Maxi Over a year ago

Let us continue this discussion in chat.

Maxi Over a year ago

Hi Tony,when am paste alphabetic in that also paste fucntionality working when 1 0r 2

|

Collectives™ on Stack Overflow

event.keyCode is not working using angular directive.?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related