javascript - Adding a space after every 4 numbers in an input field in react - Stack Overflow

admin管理员组

文章数量:1324814

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

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

• javascript
• reactjs

Share Improve this question Follow edited Dec 10, 2019 at 16:02 Josh Pittman 7,34488 gold badges4444 silver badges6767 bronze badges asked Dec 10, 2019 at 14:48 EnzoEnzo 31833 silver badges1212 bronze badges 4

• might want to loo kinto libraries such as this react text mask: npmjs./package/react-input-mask – Rohan Bhangui Commented Dec 10, 2019 at 14:50
• 1 no actually wanted to do it by my self – Enzo Commented Dec 10, 2019 at 14:57
• sure, but you can still look into the library and see how they solved the same problem – Josh Pittman Commented Dec 10, 2019 at 15:02
• 1 @Enzo take a look at this: stackoverflow./a/36568611/2280670 <-- might help you do what you need to do cleanly with regex – Rohan Bhangui Commented Dec 10, 2019 at 15:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Here is a minimalistic example: https://jsfiddle/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

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

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
  },

本文标签： javascriptAdding a space after every 4 numbers in an input field in reactStack Overflow