Card not rendered when using paste

[jessepollak]

Card not rendered when using paste

[jessepollak]

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.

[kaptk2]

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.

[denilsonsa]

@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){…}).

[jessepollak]

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!

[denilsonsa]

@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.

[denilsonsa]

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)