onInput = ({ detail }) => {
const value = detail.value; // 输入的字符串
const newValue = value.replace(/([^0-9])/g, ''); // 只允许输入数字
const formatValue = newValue.replace(/(\d{4})(?=\d)/g, '$1 '); // 每4个数字后面加一个空格
const inputLen = this.getOriginValue().length;
if (inputLen > this.maxLen) { // 如果输入的字符大于最大输入长度则禁止继续输入
this.inputRef.inputRef.value = this.state.recharge_phone;
return;
}
const end = () => {
setTimeout(() => {
this.end();
}, 10);
};
if (inputLen >= this.minLen) {
this.setState({ isValidNo: true, recharge_phone: formatValue }, end);
} else {
this.setState(
{ isValidNo: false, recharge_phone: formatValue, activeItem: -1 },
end
);
}
return formatValue;
};
/**
* 移动光标位置到最后面
*/
end() {
const obj = this.inputRef.inputRef;
const len = this.state.recharge_phone.length;
if (document.hasOwnProperty('selection')) {
const sel = obj.createTextRange();
sel.moveStart('character', len);
sel.collapse();
sel.select();
} else if (
typeof obj.selectionStart === 'number' &&
typeof obj.selectionEnd === 'number'
) {
obj.selectionStart = obj.selectionEnd = len + 1;
}
}
/**
* 获取input的原始值
*/
getOriginValue() {
return this.inputRef.inputRef.value.split(' ').join('');
}