Question

We have an order form which takes credit cards from mobile browsers: <input type=”number” id=”txtCCNumber” />

Also in addition to that we have a JavaScript which removes any non-integer characters that are inserted into the field:

$('input#txtCCNumber').keyup(function(e)
{
    var ccnum = $(this).val();
    $(this).val(ccnum.replace(/[^\d]/g, ''));
});

However we just realized that it appears that when people using an iPhone try to put their credit card in, iPhone automatically adds a comma every 3 numbers (because of the JavaScript).

Does anybody know a way to fix this JavaScript so it works?

I do not want to use type=”tel”. That is not a solution in this case.

Answer 1

Personally, I don’t think credit card numbers are an appropriate use of input type="number". According to the spec:

The input element with a type attribute whose value is “number” represents a precise control for setting the element’s value to a string representing a number.

Credit card “numbers” are strings of digits, but they don’t identify a particular numeric value, and it wouldn’t make sense for a user to enter a credit card number using the up and down arrows that some browsers attach to the input field. Your best bet is simply to use input type="text".

Also, attaching that JavaScript to the keyup event is going to annoy people like me who want to enter their credit card number with separators because it’s easier to spot check. Just let people enter their card number however they like and normalize it later.