Space every 4 numbers

Question

I have an input field that is limited to 16 numbers. What I would like to do for aesthetics is to place a space on 4 numbers.

EG. When a person enters

1234567891234567

It should look like this:

1234 5678 9123 4567

How is this possible in Key Up in jQuery?

Answer 1

You can use the module function :

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

- SEE DEMO -

However, it is a bit buggy, but it may be a good starting point for you.

As other users have noted, this would not be very useful for ease of use, and it would be better to use 4 text fields (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, maybe a little buggy, I just point out different methods.

Answer 2

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 see how jsFiddle works.

I added a focus event to make it more convenient. Summarizing:

• when blurring (i.e. when exiting): split every 4 characters;
• in focus (i.e. when editing input): remove previously added spaces.

Answer 3

Try the solution below if you consider it in multiple text boxes.

 $(function() { var charLimit = 4; $(".inputs").keydown(function(e) { var keys = [8, 9, /*16, 17, 18,*/ 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40, 45, 46, 144, 145]; if (e.which == 8 && this.value.length == 0) { $(this).prev('.inputs').focus(); } else if ($.inArray(e.which, keys) >= 0) { return true; } else if (this.value.length >= charLimit) { $(this).next('.inputs').focus(); return false; } else if (e.shiftKey || e.which <= 48 || e.which >= 58) { return false; } }).keyup (function () { if (this.value.length >= charLimit) { $(this).next('.inputs').focus(); return false; } }); }); 

It has the following functions,

• Autotabs for next input
• Numeric only
• charLimit - setting different lengths

DEMO: http://jsfiddle.net/skram/qygB2/20/

Answer 4

I would use a keypress handler here:

 $("#someinput").on('keypress',function(){ var currval = this.value.replace(/\s+/g,''); return (this.value += currval.length && currval.length%4 < 1 ? ' ' : '', true); }); 

Answer 5

Something like that

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

EDIT: Well, your example is not as good as the one above, so I added this instead.

Answer 6

Done using the keys

 $('#textbox').on('keyup', function(e) { var val = this.value; if (e.which != 8 && e.which != 46) { // handle delete and backspace if (val.replace(/\s/g, '').length % 4 == 0) { $(this).val(val + ' '); } } else { $(this).val(val); } }) 

Demo

Answer 7

here is another solution you can consider

 OnBlur = function() { var value = $('#txtName').val().replace(/\s/g, ""); var numberOfSpaces = Math.ceil(value.length / 4)-1; while(numberOfSpaces >0) { value = value.substr(0,numberOfSpaces*4) + ' ' + value.substr(numberOfSpaces*4); numberOfSpaces--; } }