Method to Detect On Change Event For Masks Other than Credit Card

[mrentropy]

It seems like Cleave prevents jQuery's usual onchange event from firing? It would be nice to either allow it, or create a custom callback as you've done for credit cards.

Really useful, though!

[trjiang]

Thanks @mrentropy we will have a look. As you said, the usual onchange event shouldn't be affected.

[nosir]

I had a look, the inner change event somehow breaks the original change event, will fix this.

[ghost]

Any progress here? Love the library, would love to use it but my original change events are spotty at best when I use Cleave on the same input.

[ghost]

If it helps anyone else, in my case setting the maxlength attribute on the input with the original change event seems to have resolved the issue. My change event would not fire if I continued to try to type more digits than allowed by Cleave using the credit card formatter. Perhaps there is something that Cleave is doing to prevent additional digits from being typed that is interfering with existing change events?

[nosir]

@trentarmstrong
Yes Cleave is doing something to prevent additional digits from being typed. Are you trying to enable 19 digits for your credit card formatter?
Also, sorry for the delay for this one, had no clue when I first looked at it, will follow up.

[ghost]

Hey! No worries. Not near my computer right now but when I am I can get you a better example of what I'm doing and the issue I'm seeing.

…

Sent from my iPhone

On Jan 27, 2017, at 6:17 PM, Max Huang ***@***.***> wrote: @trentarmstrong Yes Cleave is doing something to prevent additional digits from being typed. Are you trying to enable 19 digits for your credit card formatter? Also, sorry for the delay for this one, had no clue when I first looked at it, will follow up. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[ghost]

Here's a better example:

$('#creditCard').change(function (e) {

    // This fires inconsistently after binding with Cleave. I've noticed that
    // it fails to fire if:
    //  1. I copy and paste into the input field and tab away.
    //  2. I try to type more characters than is allowed and tab away
    // Hard to say if these are the only scenarios that fail, they are the only
    // ones I could pin down.
});

var cleave = new Cleave('#creditCard', {
    creditCard: true,
    onCreditCardTypeChanged: function (type) {
        // Do stuff.
    }
});

Chrome 55.0.2883.95
jQuery 2.0.3

[nosir]

Hey guys, sorry for the delay. I think this has been fixed in some release.

@trentarmstrong The cases you had trouble with behave like this now:

1. I copy and paste into the input field and tab away. Now if the value you copy and paste is different from what's in the cleave input field, jQuery fires the change event
2. I try to type more characters than is allowed and tab away In this case, cleave is preventing you from entering over length credit card number. The jQuery change event won't fire if the value hasn't changed.

That is to say:
5555 4444 3333 222 -> 5555 4444 3333 2222 -> tab away: jQ fires the change event
5555 4444 3333 222 -> 5555 4444 3333 2222 -> tab away -> jQ fires the change event -> focus back -> keep typing -> tab away: jQ won't fire the change event

Above behaviours are consistent with native jQ input fields

[nosir]

Closing this for now. Thanks guys