Input masks borked on mobile

I have a text field with data-inputmask:'mask':'(99)99 999 999' for a user to enter a phone number.

On MOBILE ONLY (specifically Chrome for android, but don't have other devices to check) the first two digits are entered left to right, but the remaining digits are entered right to left, then it appears to switch around again at the spaces. So entering 0412345678 comes up as 0423567841

Hi healyhatman,

I have no idea - I've never seen anything like this reported before. Please post a link to the form so I can take a quick look.

Bob

http://dirtyworkx.com.au/index.php?option=com_chronoforms6&chronoform=testingForm
It's not form specific - just whacked a text field in this test form, applied the mask, and BOOM not working properly.


Here's some other link I found on Google, may or may not be relevant. https://github.com/RobinHerbots/Inputmask/issues/1490

Hi healyhatman,

It looks like a bug in the InputMask code from your second link there. You can try updating the CF files to use the latest version which Robin says have a fix; or - simpler - see if replacing the spaces with a dash '-' solves the problem.

Bob

Nope, dashes don't work either. If I do the other thing you say, will that fix disappear when next CF gets updated?

EDIT: Dashes *might* work sorry, but it's not a fix since it switches around after the first bracket.

UPDATE:
Masks and Autocomplete don't work on Android (Chrome on Android, can't test others) - any text field with a number mask makes the autofilled field play up. So for a mask of 9999999999, 0123456789 will be autofilled as ______6__.

Hi healyhatman ,

Have you tried Robin's fix? That will disappear after the next upgrade - though hopefully Max will upgrade the upgrade the CF files so all will be well.

Bob

I don't know what you mean or how to do the fix you're speaking of sorry

Hi healyhatman,

At the end of this thread that you linked to earlier Robin says this is fixed in the current release of InputMask.

Bob

I had only read the first couple posts, my bad

Hey Bob I went and downloaded inputmask 4.x, where do I put the files?

Hi Healyhatman,

Here I think /libraries/cegcore2/assets/jquery/jquery.inputmask.js

Bob

Tried that. The file is only 2kb instead of your 55, and it doesn't work.

Hi Healyhatman,

It looks as though the InputMask file structure has been changed from the one that Max has used in ChronoForms - he will need to specify which files are required and where they go :-(

Bob

Should I send a ContactUs or something Bob?

It works (although like I said in my email there are other issues with the new update) so now I can have delicious masked input. A guide would be nice as to what other options / masks there are available.

I will say it seems to accept input a bit slowly, there's a delay after each keystroke where the caret goes to the end of the input field and then back to the correct position. From what I've read of the issue there's not a lot that can be done about that.

I have the same behavior of inputmasks not working on android devices using chronoforms V5. Is there a fix documented on how to update the jquerey.inputmask.js or other in CF5 ? The best example (well the sole input mask I use) is a phone number mask on Android, where digits are doubled, cannot delete them once entered. .... Works flawlessly on iOS devices.

Thank you !
Serge.

Hi Serge,

You can try to copy the inputmask.js file from v6 to v5 and check if that helps!

Best regards,
Max

Hi,

I copied the file InputMask.js from Chronoforms V6 onto my V5 installation and it helped a great deal, the behavior now on Android is close to working. Unfortunately I tried on an Android 4.4 phone and a problem still remains. Each time I start entering a phone number, the cursor always remains in front of the digit I entered forcing the user to either touch the field to bring the cursor to the right of the last entered digit or enter the phone number backwards (which is honestly not an option ;-) ! On Android 6.0.1 this does not happen ... Any ideas ?

Thank you !
Serge.

Hi Max,

Any prediction to have the CF5 cegcore library updated with version 3.3.9 of inputmask?

Tests with inputmask from CF6 (version 4.0.1-25), we still have the Android bug.

We really need this cause Android bug is a pain. I'm following this topic at github. I did some tests with inputmask 4x and bug not exists, very sure, neither at 3.3.9 version.

The inputmask.js from CF 6.0.11 works with no Android bug, the cursor does not move smoothly when we use backspace, compared to this Fiddle, but it's worth a lot.

I copied inputmask.js from CF6 to CF5, and Android bug persists.

Think was some cache, tested now at my smartphone and no Android bug.

Max and Grey, at that Github topic we can see the recommendation to use version 3.3.9 of inputmask.js because the 4x versions are beta. What do you think?

Hi Austre,

You can replace the file manually, did you test 3.3.9 and found that it does not have any bugs on all devices ?

Best regards,
Max