search

stripe-archive / jquery.payment

[DEPRECATED] A general purpose library for building credit card forms, validating inputs and formatting numbers.
MIT License
3.53k stars 686 forks source link

Japanese iOS users IME bug #250

Closed peakdigitaljp closed 8 years ago

peakdigitaljp commented 8 years ago

We've deployed this code (via Woocommerce / Stripe) on two Japanese websites and found it's impossible to input card numbers while using a Japanese iOS keyboard.

Please see following bug demo video. https://www.youtube.com/watch?v=MEpelmggcsE I've typed 424242 but 4244242422 has appeared

Expected behaviour

Entered card number should appear in field as entered

Actual behaviour

When a space is entered by jquery.payment of the 4th character it breaks the last character off the Japanese IME into the field then continues input with the IME

Steps to reproduce

Enter a card number using the default Japanese keyboard on iOS

Problem code

jquery.payment.js l:240

peakdigitaljp commented 8 years ago

Just following this up - the same thing happens in the expiry field. For anyone else facing this problem we've found a terrible hack which works: detecting the user agent then changing the field type to tel.

Edit --- Looks like the hack isn't so terrible? It's what Stripe themselves are doing if you look at the docs. Is this the official fix?

jenanwise commented 8 years ago

Not a hack at all. It's in the readme :) https://github.com/stripe/jquery.payment#mobile-recommendations