Different key-codes coming in Android Nexus and Samsung mobile

Question

I'm facing this issue of different key-codes on two different Android devices while developing a functionality in an Ionic app. Actually I need to develop the functionality of "Pin Code Entry" on login time, where user input integer digits in 5 fields. I need to make sure Numeric keyboard is opened, and when user enter one digit next field should focus and pressing backspace should clear current field and previous field should focus. And if user enter some other key, it shouldn't allow. I placed number input type as follows:

I applied events(keydown && keyup) via directive and placed logic to move next and prev field elements on key input. But the problem is on different browsers, different key-codes coming like for backspace on desktop chrome and chrome it's 8, but on Samsung mobile it's 229 for all keys. Then I configured the 229 code issue with this function

function getKeyCode(str) {
    return str.charCodeAt(str.length - 1);
}

But still I'm facing issue to configure the key-code of keys other than numeric and backspace like "." and "-" etc. Please help me to design some work around (Angular, Javascript or jQuery based) about issue or some library etc.

My directive is as follows:

.directive('moveNext', function() {
    return function(scope, element) {
        element.bind('keydown', function(e) {
            console.log('down' + this.value)
            element[0].value = '';
        });

        function getKeyCode(str) {
            return str.charCodeAt(str.length - 1);
        }

        element.bind('keyup', function(e) {
            var kCd = e.keyCode || e.which;
            console.log(kCd)
            if (kCd == 0 || kCd == 229) { //for android chrome keycode fix
                kCd = getKeyCode(this.value);
            }
            var value = String.fromCharCode(kCd);
            console.log(e.keyCode + '==' + e.which + '==' + kCd + '==' + value + '==' + this.value)
            if (kCd == 8 || kCd == 229 || isNaN(kCd)) {
                element[0].value = value;
                var pre = prevOf(element);
                if (pre)
                    pre.focus();
                return;
            }
            if (!(kCd >= 48 && kCd <= 57) && // 0-9
                !(kCd >= 96 && kCd <= 105) // numpad 0-9
                // some more checking like arrows, delete, backspace, etc.
            ) {
                // This is not a valid key
                e.preventDefault();
                return;
            }
            element[0].value = value;
            var next = element.next();
            if (next[0])
                next[0].focus();
        });

        function prevOf(yourElement) {
            var parent = yourElement.parent();
            var children = parent.children();

            var prev;
            for (var i = 1; i < children.length; i++) {
                if (children[i] === yourElement[0]) {
                    prev = children[i - 1];
                }
            }

            return prev;
        }

    };
})

Thanks in advance.

Answer 1

I can not help you for the backspace issue, but there is a simple solution to filter user input to digits only. Instead of trying to decode the keyCode and get its value, you can do something line this:

element.bind('keyup', function(e) {
    if(isNaN(parseInt(this.value)){
        this.value = '';
    }
}