Space out every 4 numbers

Question

I have an input box which is limited to 16 Numbers. What I'd like to do for aesthetics would be to place a gap per 4 numbers.

EG. When a person enters

1234567891234567

It should look like this

1234 5678 9123 4567

How would this be possible on Key Up in JQuery?

Answer 1

Here is another solution:

$(function() {

    $('#my-input')
    .blur(function() {
        var value = $(this).val();
        value = value.match(/.{1,4}/g).join(" ");
        $(this).val(value);
    })
    .focus(function() {
        var value = $(this).val();
        value = value.replace(/\s/g, '');
        $(this).val(value);
    });

});

You can have a look at that working jsFiddle.

I added a focus event to make it more user-friendly. To sum up:

• on blur (i.e. when leaving the input): split every 4 chars;
• on focus (i.e. when editing the input): remove the previously added whitespaces.