search

jessepollak / payment

:moneybag: A jQuery-free general purpose library for building credit card forms, validating inputs and formatting numbers.
MIT License
564 stars 157 forks source link

iOS class="cc-number" #161

Open jack-guide opened 3 years ago

jack-guide commented 3 years ago

20210621_145225000_iOS

i am using version 2.4.4 of your library.

the form has the novalidate

the page will not move away from focus of the credit card number on iOS 14.6

Have i missed something in the documentation?

melloware commented 3 years ago

Not that I am aware of but don't you have to hit "Done" link on the keyboard numeric input in IOS to close it and move on?

jack-guide commented 3 years ago

when i hit "done", the keyboard disappears but the card number is still highlighted in yellow and when i try to click a different field, it just brings me back to the card number

melloware commented 3 years ago

Let me see if I can reproduce it.

melloware commented 3 years ago

When I try it here on my iPhone it works...

https://www.primefaces.org/showcase-ext/sections/creditcard/basicUsage.jsf

jack-guide commented 3 years ago

the way it works on that links is different from the documentation

on the input box for the card number I have class="cc-number". this seems to be what is causing the problem

jack-guide commented 3 years ago

<input name="ctl00$ContentPlaceHolder1$tbPPCardNumber" type="text" id="tbPPCardNumber" class="four columns cc-number unknown" inputmode="numeric" x-autocompletetype="cc-number">

melloware commented 3 years ago

ahh yeah i am mapping it differently there.

davidmerrique commented 3 years ago

I'm having the same problem in Safari on desktop and mobile. Can't tab or click away from the credit card number input field after calling formatCardNumber(input)

This began after updating from 2.4.3 to 2.4.4

melloware commented 3 years ago

The only real change was this one...

https://github.com/jessepollak/payment/issues/155

davidmerrique commented 3 years ago

@melloware I'm wondering if it's this line that's causing the problem

https://github.com/jessepollak/payment/compare/v2.4.3...2.4.4#diff-eb104090800eb03c1ec3715392f75ea5d853e3c0252a204f165c0638c09e4e7dR735

When 'blur' happens, reFormatCardNumber is causing the field to focus again.

melloware commented 3 years ago

That is definitely the problem. I would stay on 2.4.3 for now.

melloware commented 3 years ago

I wonder if instead of reformatCardNumber i just do..

QJ.on el, 'blur', formatCardNumber(maxLength)
jack-guide commented 3 years ago

this seems to work on iOS and on Chrome on desktop

QJ.on(el, 'keyup', reFormatCardNumber);

melloware commented 3 years ago

Can you please review my PR?

XiangBo-EvanZuo commented 3 years ago

@melloware Are U talk with me ? I 'am a noob in gayhub. sorry bro.

XiangBo-EvanZuo commented 3 years ago

My issue is in Card Number Can't Be Blur In IOS When Input Card Numbers jessepollak/card#527

melloware commented 3 years ago

OK I just deployed Payment 2.4.5 to NPM https://www.npmjs.com/package/payment

Can you try again?

melloware commented 3 years ago

@jessepollak it looks like all PR's are being blocked because the build is no longer running. Can you disable that check so I can merge PR's?