Mask not respected on Android

[gbvaz]

Hi, I've been using this lib for quite a while now, it's pretty good, thank you for sharing it!

Recently I've noticed an odd behavior. On Android (that I know, 5.1 and lower ones), using Chrome (51.0.2704.81 and possibly other ones too), when I start typing numbers, say 1234 for example, in the field, I always get something like this $ 0.001234. Then, when I leave the field (blur), into another field it keeps the same $ 0.001234, but when I go back to it (focus), all of the sudden the mask is correctly applied $ 12.34.

Do you happen to have any Android device in order to simulate this situation? You can do so trying out the lib example page itself

Any help is appreciated!

Best wishes,

Guilherme Vaz

[amylashley]

I'm also having this issue!

[gutomotta]

I'm having a similar issue.

When I type anything in an input using Android, nothing happens (it behaves like an ordinary input). When I blur it and then focus it again, the mask is suddenly applied to the current input (but won't be applied as I continue typing).

Model: Samsung Galaxy S4
OS: Android 4.4
Browser: Google Chrome 51.0.2704.81
Keyboard: SwiftKey 6.3.8.73

[gbvaz]

@amylashley @gutomotta since we got no solution for this, I've switched to this lib https://github.com/igorescobar/jQuery-Mask-Plugin it has a very similar syntax and it works great both on desktop/notebooks and mobile devices. Hope it helps!

[kstyrose]

Try to replace keydownevent function with this one, sometimes keypress is not fired in the devices.

            function keydownEvent(e) {
                e = e || window.event;
                var key = e.which || e.charCode || e.keyCode,
                    keyPressedChar,
                    selection,
                    startPos,
                    endPos,
                    value,
                    lastNumber;
                //needed to handle an IE "special" event
                if (key === undefined) {
                    return false;
                }

                selection = getInputSelection();
                startPos = selection.start;
                endPos = selection.end;

                    if (key !== 8 && key !== 46 && key !== 63272) {
                        // any key except the numbers 0-9
                        if (key < 48 || (key > 57 && key < 96) || key > 105) {
                            // -(minus) key
                            if (key === 45) {
                                $input.val(changeSign());
                                return false;
                                // +(plus) key
                            } else if (key === 43) {
                                $input.val($input.val().replace("-", ""));
                                return false;
                                // enter key or tab key
                            } else if (key === 13 || key === 9) {
                                return true;
                            } else if ($.browser.mozilla && (key === 37 || key === 39) && e.charCode === 0) {
                                // needed for left arrow key or right arrow key with firefox
                                // the charCode part is to avoid allowing "%"(e.charCode 0, e.keyCode 37)
                                return true;
                            } else { // any other key with keycode less than 48 and greater than 57
                                preventDefault(e);
                                return -true;
                            }
                        } else if (!canInputMoreNumbers()) {
                            return false;
                        } else {
                            preventDefault(e);

                            if (key >= 96 && key <= 105) {
                                keyPressedChar = String.fromCharCode(key - 48);
                            }
                            else {
                                keyPressedChar = String.fromCharCode(key);
                            }

                            selection = getInputSelection();
                            startPos = selection.start;
                            endPos = selection.end;
                            value = $input.val();
                            $input.val(value.substring(0, startPos) + keyPressedChar + value.substring(endPos, value.length));
                            maskAndPosition(startPos + 1);
                            return false;
                        }
                    }


                if (key === 8 || key === 46 || key === 63272) { // backspace or delete key (with special case for safari)
                    preventDefault(e);

                    value = $input.val();
                    // not a selection
                    if (startPos === endPos) {
                        // backspace
                        if (key === 8) {
                            if (settings.suffix === "") {
                                startPos -= 1;
                            } else {
                                // needed to find the position of the last number to be erased
                                lastNumber = value.split("").reverse().join("").search(/\d/);
                                startPos = value.length - lastNumber - 1;
                                endPos = startPos + 1;
                            }
                            //delete
                        } else {
                            endPos += 1;
                        }
                    }

                    $input.val(value.substring(0, startPos) + value.substring(endPos, value.length));

                    maskAndPosition(startPos);
                    return false;
                } else if (key === 9) { // tab key
                    return true;
                } else { // any other key
                    return true;
                }
            }

[diebugger]

I tried to overwrite the keydownEvent() but it's not working yet (it behaves quite fuzzy, indeed).
I am using Android 4.4 on a Samsung Tab3 8" tablet.

[mbraz]

Hi,

Also have same problem with...

Chrome 53.0.2785.124 or Internet 4.0.20-20
Android 6.0.1;SM-G903M Build/MMB29K

The https://github.com/BankFacil/vanilla-masker run correct, but don't have support to negative numbers and HTML5 data attributes.

Thanks

[abdulmhamid]

I was able to solve it with this. It mimics the keypress function and I placed it right before the keydown function.

           $input.on('keyup', function (e) {
                e = e || window.event;
                var key = e.which || e.charCode || e.keyCode,
                    keyPressedChar,
                    selection,
                    startPos,
                    endPos,
                    value;
                selection = getInputSelection();
                startPos = selection.start;
                maskAndPosition(startPos + 1);
            });

[goodeath]

This solution worked!

[clairton]

@aureliosaraiva can you help us with this?

[ggwebdev]

Tanks @gbvaz Works pretty good for me!

[gbvaz]

@ggwebdev I'm glad I could help :)

[alexnovelli]

Thanks! This worked for me too!

[evsar3]

Other very simple workaround on this is just to set your input type as tel instead of text
Eg:
<input type="tel" inputmode="numeric">
😉

[demeralde]

FYI @abdulmhamid's solution requires you to update the source file. You can add the snippet on line 489: https://github.com/plentz/jquery-maskmoney/blob/master/src/jquery.maskMoney.js#L489

[demeralde]

I had issues with @abdulmhamid's code on browsers that weren't Chrome on Android.

A solution is to make the code only run on Chrome browsers for Android devices:

var ua = navigator.userAgent;
var isAndroid = /Android/i.test(ua);
var isChrome = /Chrome/i.test(ua);

// Fix masking on Chrome for mobile devices
if (isAndroid && isChrome) {
    $input.on('keyup', function(e) {
        e = e || window.event;
        var key = e.which || e.charCode || e.keyCode,
            keyPressedChar,
            selection,
            startPos,
            endPos,
            value;
        selection = getInputSelection();
        startPos = selection.start;
        maskAndPosition(startPos + 1);
    });
}

[guipriolli]

Thanks @dspacejs ! This worked for me.

[him-developer]

I had too many HTML forms, so appyling @evsar3 solution via JQuery worked for me.

var ua = navigator.userAgent;
var isAndroid = /Android/i.test(ua);
var isChrome = /Chrome/i.test(ua);

// Fix masking on Chrome for mobile devices
if (isAndroid && isChrome) {
    $('.work_price').attr('type','tel');
}     

[filipevl]

Outra solução muito simples para isso é apenas definir seu tipo de entrada como, em telvez de text Ex: <input type="tel" inputmode="numeric"> piscadela

Working here! Thanks

[worldbet]

filipevl - agradeço resolveu meu problema