One bug I noticed: if you enter one of the sample numbers such that the number splits into multiple fields, then backspace starting from the end, you'll end up moved to the beginning of the first field with the first few digits still filled in, rather than backspacing over them.
More generally, any time you construct your own custom input rather than using browser input fields as designed, you end up with this kind of brokenness because you have to reimplement browser logic.
I'd love to see an <input type="creditcard">, with an input-creditcard.js polyfill, and native support added to browsers. On platforms that already know your credit card number, this would allow for simple auto-fill of all relevant information. This would also make life easier for things like Google Wallet that construct virtual credit cards for you, and it would allow for browser extensions that integrate with credit-card vendors to produce one-time tokens.
One bug I noticed: if you enter one of the sample numbers such that the number splits into multiple fields, then backspace starting from the end, you'll end up moved to the beginning of the first field with the first few digits still filled in, rather than backspacing over them.
More generally, any time you construct your own custom input rather than using browser input fields as designed, you end up with this kind of brokenness because you have to reimplement browser logic.
I'd love to see an <input type="creditcard">, with an input-creditcard.js polyfill, and native support added to browsers. On platforms that already know your credit card number, this would allow for simple auto-fill of all relevant information. This would also make life easier for things like Google Wallet that construct virtual credit cards for you, and it would allow for browser extensions that integrate with credit-card vendors to produce one-time tokens.