Comments (6)
What browser are you in? Do you have the latest version (0.0.2)? We added listening on the change
event, which seems to work in my local testing on Chrome 37.
from card.
I do have the latest version, but am on Chome 35 in Linux. I can only trigger this bug if I only use the mouse to input the card number. I will try updating Chrome and see if the issue goes away.
from card.
@jessepollak Try binding to input
event, instead of (or in addition to) keypresses.
The input
event is new on HTML5 and it is triggered whenever the value changes, by whatever means. In other words, it will be triggered when typing something, or when using the mouse.
On jQuery, you can use on('input', function(ev){…})
.
from card.
Hi all, thanks for your input!
This issue doesn't appear in Chrome, but I'm guessing it may be related to #165. I'm closing in favor of that issue — if it's something different, please re-open with more information!
from card.
@jessepollak this is a different issue. Please reopen.
There are several ways to reproduce this one:
- Right-click on any field and select Paste.
- Fill one any field (with the keyboard), then select it (using the mouse), right-click and choose Cut (or Delete).
- Select some text somewhere and click-drag the selection onto any field.
- On Linux (maybe on Mac too), select some text somewhere and then middle-click onto any field (this is an alternative way of pasting text).
Again, please consider using the oninput
event. It is supported in all browsers, even in IE9. After adding the oninput
event, feel free to remove any keyboard-related event handler, as they are not needed anymore.
from card.
I tried this small patch, but it didn't fix the issue completely because of payment.coffee
, which still has several keyboard-related handlers. The fix to this issue #37 and also to the other issue #165 depends on changing/updating/fixing jessepollak/payment as well.
--- a/src/coffee/card.coffee
+++ b/src/coffee/card.coffee
@@ -162,10 +162,10 @@ class Card
el = this["$#{name}"]
if QJ.val(el)
# if the input has a value, we want to trigger a refresh
- QJ.trigger el, 'paste'
+ QJ.trigger el, 'input'
# set a timeout because `jquery.payment` does the reset of the val
# in a timeout
- setTimeout -> QJ.trigger el, 'keyup'
+ setTimeout -> QJ.trigger el, 'input'
handle: (fn) ->
(e) =>
@@ -226,7 +226,7 @@ class Card
QJ.on el, 'blur', ->
QJ.removeClass el, 'jp-card-focused'
- QJ.on el, 'keyup change paste', (e) ->
+ QJ.on el, 'input', (e) ->
val = (QJ.val(elem) for elem in el)
join = opts.join(val)
from card.
Related Issues (20)
- Demo 404s HOT 3
- This project is being used in suspicious site HOT 2
- Mastercard Not recognized HOT 5
- Card Number Can't Be Blur In IOS When Input Card Numbers HOT 10
- Credit Card with RTL the float:right makes a problem HOT 1
- Cannot read properties of undefined (reading 'replace') HOT 6
- Card Info storage to database. HOT 1
- how to flip card from js code HOT 7
- Show card without inputs HOT 3
- Add CSS variable support for card colors HOT 3
- Card credit
- Demo link is broken in the readme file HOT 2
- npm install errors HOT 10
- Credit Card Expiration Date Format Not Accepted Error HOT 13
- How to get the card type (visa, mastercard, etc.) so I can pass that info to payment gateway HOT 5
- It does not work HOT 2
- not sure if this is still relevant but for people with the same question: you can use the bin of the card to decode if it's type, the bin is the bank identification number of each card and it identifies a card down to the bank which issued it, with a BIN API like the one from binlist.io you are easily able to check which card goes with which card type. HOT 1
- pleasss.. HOT 2
- Hi
- failure to identify card HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from card.