在react開發(fā)中需要對(duì)手機(jī)號(hào)碼進(jìn)行格式化操作334（133 3333 3333）在這里總結(jié)一下
//手機(jī)號(hào)碼分割
fromvalue(mobile) {
let value = mobile.replace(/\s+/g,'');
let valueLen = value.length;
console.log(valueLen);
if (valueLen > 3 && valueLen < 8) {
value = `${value.substr(0, 3)} ${value.substr(3)}`;
} else if (valueLen >= 8) {
value = `${value.substr(0, 3)} ${value.substr(3, 4)} ${value.substr(7)}`;
}
return value;
}
//身份證號(hào)碼分割
cardValue(cardNum) {
let idCard = cardNum.replace(/\s+/g, '');
let idCardLen = idCard.length;
if (idCardLen > 3 && idCardLen < 7) {
idCard = `${idCard.substr(0, 3)} ${idCard.substr(3)}`;
} else if (idCardLen >= 7 && idCardLen < 11) {
idCard = `${idCard.substr(0, 3)} ${idCard.substr(3, 3)} ${idCard.substr(6)}`;
} else if (idCardLen >= 11 && idCardLen < 15) {
idCard = `${idCard.substr(0, 3)} ${idCard.substr(3, 3)} ${idCard.substr(6, 4)} ${idCard.substr(10)}`;
} else if (idCardLen >= 15) {
idCard = `${idCard.substr(0, 3)} ${idCard.substr(3, 3)} ${idCard.substr(6, 4)} ${idCard.substr(10, 4)} ${idCard.substr(14)}`;
}
return idCard;
}
上述代碼存在的問題和解決辦法
1.input 設(shè)置type屬性
2.代碼分割在大多瀏覽器都支持嗅回，在支付寶小程序中當(dāng)type='tel'或者type='text'發(fā)現(xiàn)分割光標(biāo)錯(cuò)誤
3.這樣寫時(shí)輸入數(shù)字按要求空格時(shí)當(dāng)從中間刪除某一位時(shí)發(fā)現(xiàn)光標(biāo)回到最后
解決光標(biāo)錯(cuò)位：在input中的 onChange={e => this.handleValue(e)}設(shè)置光標(biāo)位置
handleValue(e) {
console.log();
let id=e.target.id;
let number = '';
if (this.params['type'] === 'phone') {
number = this.fromvalue(e.target.value);
} else {
number = this.cardValue(e.target.value);
}
this.setState({
[e.target.name]: number,
},()=>{
var inpObj = document.getElementById(id);
setTimeout(function(){
console.log('test');
inpObj.setSelectionRange(number.length, number.length);
},20);
});
}
解決問題3 https://nosir.github.io/cleave.js/
使用 cleave進(jìn)行改進(jìn)褐奴，最近看一下源碼
