I'm trying to get customer credit card number with MaskedInput and I need to delete spaces before using it on calling service but even though I don't actually change event value whenever customer tries to delete it, they can't because in value spaces doesn't exist. I only want to get value without space and set it into state. How can I do that?
<MaskedInput inputMode="numeric" type="text" onChange={(e) => this.checkCC(e)} mask={[/\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/, ' ', /\d/, /\d/, /\d/, /\d/]} required></MaskedInput>
checkCC(e) {
this.setState({
creditCard: event.target.value.replaceAll(" ", "")
});
}
I believe your mask is incorrect. Try something like this
mask={[
{
length: 4,
regexp: /^[0-9]{4}$/,
placeholder: "xxxx"
},
{ fixed: " " },
{
length: 4,
regexp: /^[0-9]{4}$/,
placeholder: "xxxx"
},
{ fixed: " " },
{
length: 4,
regexp: /^[0-9]{4}$/,
placeholder: "xxxx"
},
{ fixed: " "},
{
length: 4,
regexp: /^[0-9]{4}$/,
placeholder: "xxxx"
}
]}
You can use the trim() function:
this.setState({
creditCard: event.target.value.trim()
});