CODEWITHSUNDEEP
javascriptjquery
user94614
user94614

Reputation: 511

Javascript - Insert spaces after numbers in textboxes

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?

Upvotes: 4

Views: 1391

Answers (4)

Gibbs
Gibbs

Reputation: 22956

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

Upvotes: 8

Greg Borbonus
Greg Borbonus

Reputation: 1384

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/

Upvotes: 0

Jordan Davis
Jordan Davis

Reputation: 1520

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);

Upvotes: 0

madalinivascu
madalinivascu

Reputation: 32354

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();
}

Upvotes: 0

Related Questions