If i entered text in text-input field then automatically it takes a space after 4 digits.

Here is my code for text-input field:

handleCardNumber = (text) => {
    this.setState({ cardNumber: text })
}

<TextInput
    ref="first"
    underlineColorAndroid="transparent"
    autoCapitalize="none"
    style={styles.cardNumberTextInput}
    placeholder="1234 1234 1234 1234"
    placeholderTextColor="grey"
    returnKeyType='next'
    keyboardType = {'numeric'}
    onChangeText={this.handleCardNumber}
    onSubmitEditing={(event)=>{
    this.refs.second.focus();
}}

Here is my screenshot:

If i entered text in text-input field then automatically it takes a space after 4 digits.

Here is my code for text-input field:

handleCardNumber = (text) => {
    this.setState({ cardNumber: text })
}

<TextInput
    ref="first"
    underlineColorAndroid="transparent"
    autoCapitalize="none"
    style={styles.cardNumberTextInput}
    placeholder="1234 1234 1234 1234"
    placeholderTextColor="grey"
    returnKeyType='next'
    keyboardType = {'numeric'}
    onChangeText={this.handleCardNumber}
    onSubmitEditing={(event)=>{
    this.refs.second.focus();
}}

Here is my screenshot:

• javascript
• react-native

1 Answer 1

Replace your code with below:

handleCardNumber = (text) => {
  let formattedText = text.split(' ').join('');
  if (formattedText.length > 0) {
    formattedText = formattedText.match(new RegExp('.{1,4}', 'g')).join(' ');
  }
  this.setState({ cardNumber: formattedText });
  return formattedText;
}

Add this line in your input code to show changes state value:

value={this.state.cardNumber}

JS Demo: (enter more than 4 digits)

handleCardNumber = (text) => {
      let formattedText = text.split(' ').join('');
      if (formattedText.length > 0) {
        formattedText = formattedText.match(new RegExp('.{1,4}', 'g')).join(' ');
      }
      //this.setState({ cardNumber: text });
      console.log(formattedText)
      return formattedText;
    }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" onchange="handleCardNumber(this.value)" >