Buy Now
Sign in

Input masks borked on mobile

healyhatman , July 05 2017
Answered
h
healyhatman

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

GreyHead

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

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much

h
healyhatman

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

GreyHead

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

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much

h
healyhatman

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.

h
healyhatman

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__.

GreyHead

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

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much

h
healyhatman

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

GreyHead

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

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much

h
healyhatman

I had only read the first couple posts, my bad

h
healyhatman

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

GreyHead

Hi Healyhatman,

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

Bob

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much

h
healyhatman

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

GreyHead

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

ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much

h
healyhatman

Should I send a ContactUs or something Bob?

admin

Hi,

How is this working after the new update ?

Best regards,
Max

Max
If your main question got answered then please mark the answer using the button!

h
healyhatman

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.

s
sbsi

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.

admin

Hi Serge,

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

Best regards,
Max

Max
If your main question got answered then please mark the answer using the button!

s
sbsi

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.