Forums

Input masks borked on mobile

healyhatman 05 Jul, 2017
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 05 Jul, 2017
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
healyhatman 05 Jul, 2017
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 05 Jul, 2017
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
healyhatman 05 Jul, 2017
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.
healyhatman 09 Jul, 2017
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 10 Jul, 2017
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
healyhatman 10 Jul, 2017
I don't know what you mean or how to do the fix you're speaking of sorry
GreyHead 10 Jul, 2017
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
healyhatman 10 Jul, 2017
I had only read the first couple posts, my bad
healyhatman 14 Jul, 2017
Hey Bob I went and downloaded inputmask 4.x, where do I put the files?
GreyHead 14 Jul, 2017
Hi Healyhatman,

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

Bob
healyhatman 14 Jul, 2017
Tried that. The file is only 2kb instead of your 55, and it doesn't work.
GreyHead 14 Jul, 2017
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
healyhatman 25 Jul, 2017
Should I send a ContactUs or something Bob?
Max_admin 31 Jul, 2017
Answer
Hi,

How is this working after the new update ?

Best regards,
Max
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
healyhatman 31 Jul, 2017
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.
sbsi 28 Sep, 2017
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.
Max_admin 03 Oct, 2017
Hi Serge,

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

Best regards,
Max
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
sbsi 04 Oct, 2017
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.
Austre 10 Oct, 2017
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.
Austre 10 Oct, 2017

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?
Max_admin 12 Oct, 2017
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
Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.
This topic is locked and no more replies can be posted.