Inputmask: Android Information

[rizowski]

I have found some information that I hope is useful for Android. I have found that this library still breaks on Galaxy devices. I started to look into what was causing some of these issues. As of right now, Galaxy devices are not registering the keys that are pressed. It instead returns 0 for the keydown/up events. I have written several tests to see if I could replicate the issue and spent several days scratching my head to why they were passing when I could clearly break it.

The Jasmine tests that I have written are similar to yours but they are returning a false positive on input. As you can specify in code what key is pressed and so the mask is working if it receives a keycode. Although if it receives keycode 0 (null in Ascii) it does not know how to handle that and allows input before the mask no limit to the number of characters entered.

Here is some of the tests that I have used for trying to identify the problem. For these tests I was using your sendKey and sendKeys methods.

    beforeEach(function () {
        jasmine.getFixtures().set('<input type="tel" id="test"/>');
        inputField = $('#test');
    });
    describe("SSN", function () {
        var deleteInput = function () {
            for (var i = 0; i < inputField.val().length; i++) {
                inputField.sendKey(keys.BACKSPACE);
            }
        };
        beforeEach(function () {
            inputField.inputmask("999-99-9999");
        });

        it("applies a mask to the field with MaskedInput attribute", function () {
            inputField.val('1');
            expect(inputField.val()).toEqual("1__-__-____");
        });

        it("allows deletion of the input", function () {
            inputField.val('333224444');
            deleteInput();
            expect(inputField.val()).toEqual("");
        });

        it("allows input after deleting input from field", function () {
            inputField.sendKeys('333224444');
            deleteInput();
            expect(inputField.val()).toEqual("");
            inputField.sendKeys("123");
            expect(inputField.val()).toEqual("123-__-____");
        });

        it("allows inserting values with INSERT mode on", function () {
            inputField.sendKey(keys.INSERT);
            inputField.sendKeys("123");
            expect(inputField.val()).toEqual("123-__-____");
        });
    });

Hope this helps with the advance on Android and mobile devices. :smile:

Resources:
Thread on the return 0 issue: https://code.google.com/p/chromium/issues/detail?id=118639
Test for return 0: http://goo.gl/n7IKjF

[RobinHerbots]

@rizowski ,

Finally got to read the docs.

I will try out the following events. Maybe they will be accurate on android chrome.
compositionstart
compositionupdate
compositionend

[RobinHerbots]

http://jsfiddle.net/Tpr6N/30/

416

[RobinHerbots]

http://jsfiddle.net/Tpr6N/36/

[greengerong]

I meet same problem on my nexus 5 chrome(version 35), Any idea for it?

[RobinHerbots]

The idea is to react on the composition events, but I didn't found the time
yet to experiment.

2014-07-02 17:05 GMT+02:00 green [email protected]:

I meet same problem on my nexus 5 chrome(version 35), Any idea for it?

—
Reply to this email directly or view it on GitHub
https://github.com/RobinHerbots/jquery.inputmask/issues/465#issuecomment-47788187
.

[jason-linthwaite]

Hi Robin,

Just wondering if this is fixed?

[RobinHerbots]

@jason-linthwaite ,

I haven't found the time to further investigate, ... so no further progress

[jason-linthwaite]

Ok thanks for the update Robin. Do you know if there is anyway to workaround or test the browser and remove masking if it is Android > 4?

[rizowski]

@jason-linthwaite You could do some checking on the navigator.userAgent for ignoring certain versions. I know Robin uses http://jsfiddle.net/Tpr6N/15/ for testing and has the line I am speaking of. You can do a string .indexOf() for certain versions of android and wrap the $.inputmask() initializer in an if statement so that only versions below XXX is shown.

[jason-linthwaite]

@rizowski thanks for the comment. I don't suppose you use this plugin and might be able to give a few more words on how you deal with the issue?

Not sure which agents I would be checking for as don't know what it affects and also not done user agent testing before so if you already had a snippet I can drop in it would be good!?

[rizowski]

@jason-linthwaite I use this plugin for work, but we ignore all of Android.

    if(!navigator.userAgent.contains("Android")){
        $("someInput").inputmask();
   }

The string.contains function I have specified is written here:
http://jsfiddle.net/Rizowski/XpUe7/

But simply put it is:

   if(navigator.userAgent.indexOf("Android") > 0){ ... }

Regex might be simpler or easier since you are wanting to do versions. But for my case just turning it off for android in general is easier until either we find a way to fix it, someone else does or Robin does.

This is the kind of User string you might expect from an android phone:

Mozilla/5.0 (Linux; Android 4.4.4; Nexus 5 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.131 Mobile Safari/537.36 =>

(From my Nexus 5)

[RobinHerbots]

New test fiddle http://jsfiddle.net/robinherbots/1x7j7evo/5/embedded/result/

[garex]

Im' tried compositionupdate — nothing there. Under real device through remote debug.
Only "input" event fires — there is also empty :(

As a dirty workaround we can emulate "change" event by polling input value every X ms and remove "bad" chars or update value to meet mask.

[rimata12]

something new about this issue ?

[RobinHerbots]

@rimata12 ,

It will be for milestone 3.3

[garex]

@RobinHerbots did you find some normal solution for this?

[RobinHerbots]

@garex ,

You can have a try with the latest commit

[garex]

@RobinHerbots btw, have you tried locally and on some real device(-es)?

[RobinHerbots]

Yes, I did the test on my samsung phone.

[garex]

@RobinHerbots sorry, but I can't test it in near time. But when will — I'll report back.

@all pls someone test it under Android!

[sollipse]

Running into this same issue myself. My guaranteed reproduction method is go boot up a Genymotion virtual emulator, set to some Galaxy device running android 4.x.x, then setting "default keyboard -> hardware keyboard OFF" in the emulated phone's settings.

[RobinHerbots]

@sollipse ,

Android still gives some uncontrolled behavior. It should be possible to stop the compositioning. That would fix alot.

[sollipse]

Robin,

by "compositioning", do you mean the IME keyboard moving the cursor around and not registering certain softkeyboard events?

[RobinHerbots]

@sollipse ,

Exactly

[sollipse]

To clarify, this issue only crops up on the default android browser, and only on sub-4.4 devices?

[RobinHerbots]

No also on the other browsers.

[wowDaiver]

I finded temporary solution for phone mask. Set type input field as "tel"

My device Samsung Galaxy S3

[RobinHerbots]

https://dvcs.w3.org/hg/ime-api/raw-file/default/Annex.html
https://html.spec.whatwg.org/multipage/forms.html#input-modalities:-the-inputmode-attribute

[JoeyHoutenbos]

Using the input type "tel" does indeed work, but this mask "9999AA" is not working on Android (Galaxy Tab 3) with the default Samsung keyboard. When I switch to another keyboard this is working or when I turn off the "Predictive text" option. Also a external (bluetooth) keyboard is working..
There are just some softkeyboards that aint working.. If I can be of any assistance with solving the Android problems let me know

[jason-linthwaite]

Robin, I haven't looked at this for a while and just had a brief look through the posts above - did you incorporate a fix? Seems like a tricky problem...

[RobinHerbots]

http://www.w3.org/TR/ime-api/
http://caniuse.com/#feat=ime

[jpgamaral]

What's the status on this? I am also having issues using a date mask on Android.

[RobinHerbots]

@jpgamaral ,

I guess as long there is no way to control the IME, there is no real solution to the problem. See previous comment.

[jpgamaral]

@RobinHerbots, okay thank you.

[danielnass]

Hey guys, how are you?

I found something that can help with Samsung keyboard or other modified keyboards.

Here one guy told to use oninput event, that is similar to onchange event, but occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed. http://stackoverflow.com/a/33646354

And here are more information. The last comment says to use onkeyup event to fix samsung keyboard. http://stackoverflow.com/questions/17139039/keycode-is-always-zero-in-chrome-for-android

I'll be glad if can help more.

[RobinHerbots]

Cuurent implementation only acts on the input event as the keypress is not fired. Compositionevents are ignored in mobile.

[sayannisur]

Hi,

I am using this inputmask js plugin latest one in my code.
But the problem with duplicate characters seems to exist in samsung note 2.
Is there any latest soln to this?
I am using the below code :+1: $("input[data-rule-accnumber='true']")

            .inputmask("9999999999",
         {
       // $("input[id$=txtAccountNumber]").mask("9999999999",
         // {
                "oncomplete": function () {
                    $(this).parent().removeClass('invalid').addClass('valid');
                    $(this).attr('data-mask', 'valid');
                },
                "onincomplete": function () {
                    $(this).parent().removeClass('valid').addClass('invalid');
                    $(this).attr('data-mask', 'invalid');
                }

            });

Regards,
Sayani Sur

[zgr024]

Still no solution to this error. Using various Galaxy devices and browsers. Input mask plugin is rather useless these days it seems.

Android Devices Tested
Galaxy S5
Galaxy S6 Edge +
Galaxy S7 Edge
Galaxy Note 7 (hasn't exploded yet)

On a side note, the issue is a bit different on Apple devices but still an issue.

Apple Devices Tested
iPhone 5
iPhone 5s
iPhone 6
iPhone 6s

[nicklello]

I'm not clear on if this was fixed/worked around or not....

[zgr024]

The issue has not been fixed. The work around is to use a different masking plugin that doesn't display the mask format on focus but rather adds the mask as the user types.

jQuery Mask Plugin seems to work fine, at least the version i have which is v1.5.3. Latest as of this post is 1.14.0

github.com/igorescobar/jQuery-Mask-Plugin

[RobinHerbots]

@nicklello , @zgr024 ,

The question is what do you call supported!

Try both plugins with predictive text on ..... and see them both fail. (the reason see previous comments)

[RobinHerbots]

@zgr024 ,

Can you have a try with the current version on github and give your thoughts on it. Also include the inputmask.css from within the extra folder.

[whooehoo]

@RobinHerbots ,

Hi, Robin!
I think i found problem and decision on Android.

In initializeColorMask function you getBoundingClientRect from input, but it's wrong, because getBoundingClientRect get top, left, right ,bottom, height, width relative to window.

There's a simple example, used the last version of jquery.inputmask.bundle.js.

https://whooehoo.github.io/test

Just turn on device inspector in Chrome or open page on Android device.

My pull request on this bug.

https://github.com/RobinHerbots/Inputmask/pull/1404

[br4in3x]

Was facing same issue, and as quick fix - switched to another library. But they also had exactly same problem and it was fixed, check here.

[uebbi]

Nevermind! Bug fixed on current version! My bad!

Same problem here! Tested on Android 7 - Chrome and Firefox!

Any help?!

[mgomez]

@uebbi v3.3.11?