adding padding or styling within the actual text field

Question

So I have a field for visitors to enter their credit card info

<div class="payment_field"><label for="card_number">Card Number</label><input class="payment_input" name="card_number" type="text" id="card_number" maxlength="17"></div>

Currently if someone enters numbers in this field then it looks like 1234567890123456 I wanted them to look like 1234 5678 9012 3456

My only theory was to have 4 different text fields, but I was wondering if there was someway you could use jquery to space the numbers after every 4 were entered, like adding padding? Or would it be possible to simply add a   after each 4 numbers, and then when form submits remove all spaces?

Answer 1

Actually this answer is not right.

1. When deleting the numbers, you have to delete the spaces, these should be removed automatically
2. Amex has 17 numbers, so the last number is alone e.g. 1234 5, on the credit card they are together, 12345. So there should be another if statement in there to make sure the last set of numbers is either grouped by 4 or 5 numbers.

How are those two points achieved?