Closed ddayguerrero closed 6 years ago
@ddayguerrero This looks awesome, thank you!
Do you mind resetting the diff to only the changes to src/payform.coffee
?
My pleasure, will do! 😄
Could you also reset package-lock.json
?
Seems like there's an issue between Node 6 and CoffeeScript:
$ npm install
npm WARN deprecated coffee-script@1.9.3: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
npm ERR! registry error parsing json
Fixes #20 and #35
Changes
Update card position only after formatting full-width to half-width characters in order to preserve its rightmost position.
Refactor credit card number and expiry number format unit tests as they were false-positive.
Walkthrough
Before
Credit Card Number Input Given that the user has selected a full-width character source input (e.g. Hiragana), the caret will eventually trail by 1 position as soon as the formatter is triggered.
Typing
4510 1523...
:4
4
5
45
1
451
0
4510
1
4510 1
5
4510 51
instead of4510 15
Expiry Number Input Similar behaviour for Expiration Input
Typing![2](https://user-images.githubusercontent.com/6437556/42039822-4688ef02-7abc-11e8-8922-c86102c64145.gif)
222
to obtain02 / 22
:After
Credit Card Number Input Typing![3](https://user-images.githubusercontent.com/6437556/42039756-21faabee-7abc-11e8-906e-21035fa5e768.gif)
4510 1523...
caret is now at the correct positionExpiry Number Input Typing![4](https://user-images.githubusercontent.com/6437556/42039742-1d59077a-7abc-11e8-92ce-cc6b96b7c0b3.gif)
62018
to obtain06 / 2018
Additional Information
Covers any input sources with full-width numbers
Tested with latest Chrome, Firefox, and Safari