Hacker News Reader

Comment by gingerlime | Hacker News Reader

jquery.payment from stripe[0] helps with formatting and automatically adjusts it to the card type as you type in the numbers. It does seem to ignore spaces though, but it adds them for you as you type. If you type in a VISA number it will format it as XXXX XXXX XXXX XXXX, but if you type in AMEX, it will format it as XXXX XXXXXX XXXXX. Pretty neat if you ask me.

You can try it here http://codepen.io/anon/pen/WvygyO

VISA: 4242 4242 4242 4242 AMEX: 3782 822463 10005 Diners: 3056 930902 5904

[0]https://stripe.com/blog/jquery-payment / https://github.com/stripe/jquery.payment

View on HN

The automatic formatting seems more "cool" then actually useful. I'd much prefer that it show characters as I type them, like pretty much every other text input field.

As opposed to most other text input fields you encounter in the wild, credit cards (and phone numbers) have a singular canonical format. As long as you don't limit HOW it's entered (or pasted), it makes a lot of sense to coerce the input into the canonical format.

Most fields don't reformat and add characters like spaces as I type. I personally find it a bit jarring. I suppose reformatting it one the box loses focus isn't as bad, but I'd still prefer you just keep what I type.

The iPhone reformats phone numbers as you type them, and I personally don't find it jarring at all.

Try moving to a country that splits phone numbers different that what you are used to. I grew up with 3-3-4 but live in a country that splits 2-4-4. Subtly annoying.

They most certainly do not have a singular canonical format. American Express cards use different groupings and a four-digit card security code.

At least for the US, the issuer of a credit card (and thus the format) can frequently be determined from as little as the first digit. For instance, nearly all card numbers starting with '4' are Visa.

I find it both cool and useful. The digits on my credit card are already separated into 4 segments, so it's natural for me to both read and type them in 'chunks' of 4. If I need to compare it to what's on screen, it's much easier to see. And it's harder to lose track of which digit you're at and what's next. Or if you mistyped anything - it's visually clear as well because you're likely to change the "balance" between the individual segments (e.g. push one digit to the next segment).

Reply on news.ycombinator.com