Adding a space after every 4 numbers in an input field in react

Question

I'm trying to add a space after every 4 numbers in an input field.

here's my code :

    credit: function(e) {
        const val = e.target.value;
        const valArray = val.split(' ').join('').split('');
        if(isNaN(valArray.join('')))
            return;
        if(valArray.length === 17)
            return
        if(valArray.length % 4 === 0) {
            this.setState({ number: e.target.value + "  " });
        }else{
            this.setState({ number: e.target.value})
        }
  },

and here's the rules : user can write only numbers and length should 16 and add space after each 4 numbers.

the problem is :

1: at the end of the numbers there is a extra space that added after the last number

2: i can't use backspace to delete element (after pushing back space it will add space in front of the numbers)

Fiddle

might want to loo kinto libraries such as this react text mask: https://www.npmjs.com/package/react-input-mask — Rohan Bhangui, Dec 10 '19 at 14:50
sure, but you can still look into the library and see how they solved the same problem — Josh Pittman, Dec 10 '19 at 15:02
@Enzo take a look at this: https://stackoverflow.com/a/36568611/2280670 <-- might help you do what you need to do cleanly with regex — Rohan Bhangui, Dec 10 '19 at 15:09

score 4 · Answer 1 · answered Dec 10 '19 at 15:11

Here is a minimalistic example: https://jsfiddle.net/unah2qzf/

Key here is to set the onchange method

onChange(e) {
  var val = e.target.value;
  this.setState({
    number: val.replace(/\W/gi, '').replace(/(.{4})/g, '$1 ')
  });
}

im sure you can figure out from here how to restrict to numbers

score 2 · Accepted Answer · answered Dec 11 '19 at 06:59

you need to check each item with the previous item to see if there is a space or not.

var val = e.target.value;
    const valArray = val.split(' ').join('').split('');
    var valSpace = val.split("")

    // to work with backspace
    if(valSpace[valSpace.length-1] == ' '){
        var valSpaceN = valSpace.slice(0, -2)
        val = valSpaceN.join("")
        this.setState({ number:val });
        return;
    }

    if(isNaN(valArray.join('')))
        return;
    if(valArray.length === 17)
        return
    if(valArray.length % 4 === 0 && valArray.length <= 15) {
        this.setState({ number: e.target.value + "  " });
    }else{

        this.setState({ number: e.target.value})
    }

Working Fiddle

sathish1409 · Answer 3 · 2019-12-10T15:24:22.760

Thank me later :P

prev:0,
    getInitialState: function() {
    return {number: ''};
  },
    credit: function(e) {
         const val = e.target.value;
        const valArray = val.split(' ').join('').split('');
        console.log(valArray)
        if(isNaN(valArray.join('')))
            return;
        if(valArray.length === 17)
            return
        if(valArray.length % 4 === 0 && this.prev < valArray.length) {
            this.setState({ number: e.target.value + "  " });
        }else{
        console.log()
            this.setState({ number: e.target.value})
        }
        this.prev = valArray.length
  },

I've tested this in your fiddle, it worked. Just copy paste the above code to yours... Now you can press backspace — sathish1409, Dec 11 '19 at 05:46

Adding a space after every 4 numbers in an input field in react

3 Answers3