search

CalderaWP / Caldera-Forms

Drag and drop, responsive WordPress form builder.
https://CalderaForms.com
GNU General Public License v2.0
187 stars 163 forks source link

Input masks with separators not working on Chrome for Android #1507

Open cbomkamp opened 7 years ago

cbomkamp commented 7 years ago

What Version Of Caldera Forms, WordPress and PHP Are You Using?

WordPress Version: 4.7.3 PHP Version: 7.0.16 MySQL Version: 5.5.51 Caldera Forms Version: 1.5.0.8 WP_DEBUG: 1

Does Your Issue Presist When You Disable All Other Plugins and Switch To The Default Theme?

Yes

What Is The Unexpected Beahviour?

Input masks that contain any non-typed characters, such as separators, do not input correctly on Chrome 57 on Android 7.0 (possibly iOS as well, I haven't tested that).

I have a couple Single Line Text fields that I want to use the following input mask for: (999) 999-9999. I'm using the 'tel' input type but this issue also happens with 'text'.

While the new phone number field type is nice, I prefer to use an input mask so I get consistently formatted output.

These fields work fine on desktop browsers. However, on Chrome on Android, each time you enter a character, the cursor moves 1 position, even if the next character is part of the mask. So as soon as you encounter a character that is part of the mask but is not entered by the user, the cursor still only moves forward 1 character, when it should move to the next typeable position. This results in the characters entered being inserted in the wrong order.

I'm using a pipe here to show where the cursor is. I'm entering the characters '1234567890' in order. Hopefully this adequately illustrates the behavior:

(| (1| (12| (123| (123)| 4 (123) |54 (123) 6|54 (123) 67|5-4 (123) 678|-54 (123) 678-|954 (123) 678-0|954

What PHP Errors Have You Logged While Reproducing This Bug?

None

What JavaScript Errors Have You Seen While Reproducing This Bug?

None

Shelob9 commented 7 years ago

Related #1271 (probably a dupe)

cbomkamp commented 7 years ago

You might know this already but apparently issues with input masks on Android are quite common. I tried using a third-party library to handle this and it also had a similar issue. Then I found https://github.com/RubtsovAV/jquery.maskedinput which seems to have solved this issue with these commits:

https://github.com/RubtsovAV/jquery.maskedinput/commit/851a3762006efb1efa616dae6ae0c5ce9b4362f2 https://github.com/RubtsovAV/jquery.maskedinput/commit/843ce1ab9f0ed5c56c18ff6040d291f5ebb39a92

That might give some clue how to fix this in CF. I'm using this library for now and it works pretty well.