admin管理员组文章数量:1323707
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
Share Improve this question edited Dec 10, 2019 at 16:02 Josh Pittman 7,3448 gold badges44 silver badges67 bronze badges asked Dec 10, 2019 at 14:48 EnzoEnzo 3183 silver badges12 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
3 Answers
Reset to default 5Here 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
版权声明:本文标题:javascript - Adding a space after every 4 numbers in an input field in react - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742128821a2422066.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论