export default () => {
const [value, setValue] = useState(null);
const [start, setStart] = useState(0);
const [key, setKey] = useState(null);
useEffect(()=>{
inputRef.current.selectionStart = start;
inputRef.current.selectionEnd = start;
}, [start, value])
return (
<input
ref={inputRef}
value={value}
onKeyDown={(e)=>{
if(e.key === 'Backspace'){
setKey('Backspace')
setStart(e.target.selectionStart);
}
}}
onChange={(e) =>{
let value = e.target.value;
let start = e.target.selectionStart;
if(key === 'Backspace' && start === 3){
value = value.replace(/[^\d]/g,'').replace(/\s*/g,"").slice(0, 11)
value = `${value.slice(0,2)}${value.slice(3,4)} ${value.slice(4, 8)} ${value.slice(8, value.length)}`
setValue(value);
setStart(2)
return
}
if(key === 'Backspace' && start === 8){
value = value.replace(/[^\d]/g,'').replace(/\s*/g,"").slice(0, 11)
value = `${value.slice(0,3)} ${value.slice(3, 6)}${value.slice(7, 8)} ${value.slice(8, value.length)}`
setValue(value);
setStart(7)
return
}
value = value.replace(/[^\d]/g,'').replace(/\s*/g,"").slice(0, 11);
if(value.length >= 7 && value.length < 12){
value = `${value.slice(0, 3)} ${value.slice(3, 7)} ${value.slice(7, 11)}`;
}
if(value.length === 7){
value = `${value.slice(0, 3)} ${value.slice(3, 7)} `;
}
if(value.length > 3 && value.length < 7){
value = `${value.slice(0, 3)} ${value.slice(3, 7)}`;
}
if(value.length === 3){
value = `${value.slice(0, 3)} `;
}
if(start < 3){
setStart(start)
}
if(start === 3){
setStart(start + 1)
}
if(start > 3 && start < 8){
setStart(start)
}
if(start === 8 ){
setStart(start + 1)
}
if( start > 8) {
setStart(start)
}
if(start >= 13){
setStart(13)
}
setValue(value)
setKey(null)
}}
/>
)
}
334手机号格式的输入框react
最新推荐文章于 2024-05-16 09:46:22 发布