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

You could make use of the modulus function:

$("input").keyup(function(){
        var $this = $(this);
        if ((($this.val().length+1) % 5)==0){
            $this.val($this.val() + " ");
        }
    });  

— SEE DEMO —

However its a bit buggy, but could be a good starting point for you.

As other users have mentioned, this would not be good for usability, and it would be best to use 4 text boxes (if the length is always 16) and use something like this:

$("input").keyup(function(){
        var $this = $(this);
        if ($this.val().length>=4){
         $this.next().focus();   
        }
    }); 

— SEE DEMO —

Again, might be a bit buggy, I’m just pointing out different methods.