Javascript - Insert spaces after numbers in textboxes

Question

I'm looking for a way to insert a space after 4 numbers within a textbox.

Example: XXXX XXXX XXXX

I've been able to get the spacing with no arrow keys or arrow keys with no spacing.

I have looked into this question and a few others on the site but I've been unable to solve the issue of the backspace and arrow keys.

Here is my code:

function isNumber(event) {
    event = (event) ? event : window.event;
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
return true;
}

And here is a JSFiddle for it. This example is very close but I haven't quite got the spacing correct.

Is this possible to do with my current function or do I need to approach this in a different manner?

EDIT: Is it possible to add arrow key functionality without the cursor allows returning to the back after being released?

Gibbs · Accepted Answer · 2016-03-30T03:53:20.750

8

Demo

Problem is You have used keypress events.

 <input type="text" id="test" maxlength="14" name="test" 
     onkeyup="return isNumber(event)" />

Same function from the answer you referred

  function isNumber(e) {
   e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').
                      replace(/(.{4})/g, '$1 ').trim();
 }

This Article will clearly explain why keyup and keydown event works but not keypress

To allow arrow keys Demo

You have to use keydown event

edited Mar 30 '16 at 03:53

answered Mar 29 '16 at 04:13

Gibbs

21,904
13
74
138

What is wrong with the `keypress` event... You made it work but you should have justification as well... – Rayon Mar 29 '16 at 04:16
Is it possible to allow arrow keys? If you try arrowing to the left and release the key, the cursor moves to the back. – user94614 Mar 30 '16 at 02:36

score 0 · Answer 2 · answered Mar 29 '16 at 04:32

I sugest you use oninput event that takes care of keyword paste and mouse paste

 <input type="text" id="test" maxlength="14" name="test" oninput="return isNumber(event)" />

js:

function isNumber(e) {
     e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();
}

Greg Borbonus · Answer 3 · 2016-03-29T04:48:32.070

I see why you're sticking with the keypress event, so this function should make what you want to do possible.

Please read the notes inside the commented area's, I try to explain what it's doing.

I'm not very good with regex yet, but thanks to the other answer, I think this one will work best.

Code using REgex from @Gops AB:

function isNumber(event,el) {
    event = (event) ? event : window.event;

    var charCode = (event.which) ? event.which : event.keyCode;

      if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    //Add a space after 4 numbers.


    var v=el.value + String.fromCharCode(charCode); //Keypress does not let us see the value of the text box after the press, so we have to add the string to our comparison.
    v=v.replace(/\s/g,'');

    el.value=v.replace(/(.{4})/g, '$1 ').trim(); // using regex from other answer. Thanks @Gops AB for the example
    return false;
}

Demo with using Regex: http://jsfiddle.net/gregborbonus/Lm2hS/3208/

score 0 · Answer 4 · answered Mar 29 '16 at 04:47

Here is the shorthand most efficient way:

//HTML

<input type="text" id="cc" name="cc" maxlength="19">

//JS

init=()=>document.getElementById('cc').addEventListener('keyup',(e)=>e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim());
document.addEventListener('DOMContentLoaded', init);

Javascript - Insert spaces after numbers in textboxes

4 Answers4