Credit Card field issues on Android

[stuyam]

On Android is seems that the caret is reset to the beginning of the input when typing and it makes the credit card number enter backwards into the input. Here is the information that I have so far on the issue:

• in chrome on android 4.3 and 5.1

• on android 4.3, all numbers are entered backwards
• on android 5.1, only the first and next number after a space is reversed

This also happens in the web view inside of apps on android. Has anyone else seen the issues of this? Is there a way we could detect that it won't work and abort payform on these devices that don't support it.

Thanks to everyone that contributes to this library it is awesome!

[jondavidjohn]

Bummer! Thanks for the report.

Would also appreciate any troubleshooting attempts since you may be closer to the problem.

[stuyam]

So I wrote some logic in my own application to basically just drop formatting on android devices. Kind of a bummer but the formatting isn't the most important part. Plus I would rather have my users enter their card numbers correctly instead of them getting entered backwards and weird things happening with that.

With my basic search online I found it to be a big problem. It seems setting the caret position inside of inputs on android has been an issue for a while.

Here are related issues on other repos that are similar:
jQuery Mask: igorescobar/jQuery-Mask-Plugin#348
Input Mask: RobinHerbots/Inputmask#416
Masked Input: https://github.com/digitalBush/jquery.maskedinput/issues/382

Need to dig further into their solutions if any of them had a resolution. Needs more research.

[chrisnelson]

This might not be the same exact issue as I ran into, but see my commit on my fork which solved my issue where the caret positioning wasn't working on Chrome on Android on a Samsung phone.

chrisnelson/jquery.maskedinput@91d2082

[joe4mg]

In case anyone is looking for a quick fix - changing the input to type='tel' appears to stop this bug appearing on Android devices

[stuyam]

Is that true @joe4mg I would be interested to test that out

[JesperWe]

@joe4mg type="tel" does not solve the problem here (well it is nice with the tel keyboard, but caret position is still screwed up).

I can also confirm that the issue is still present after applying #26

[vishal1785]

@joe4mg I tried with input type="tel", it does fixes the issue for me.
Tested it on One plus 2, 3T and Nexus 5X device running OS versions > 6.0