1.问题描述展示
示例代码所做限制为不允许输入字母d，其他限制规则可以根据需求自己调整，使用React编写，其他框架或原生均可根据该代码理解原理进行转变，特意使用了中文键盘可以看到输入框下面白色框闪出，就是我按下了键盘d键
1） gif图示例
输入框未处理情况演示.gif
2）代码
import { useState } from "react"
export default function () {
const [value, setValue] = useState(1234)
const onChange = (e) => {
const inputValue = e.nativeEvent.target.value
const value = inputValue.replace('d', '')
setValue(value)
}
return <div style={{marginTop:200}}>
<h3>焦点修改实例：不允许输入字母 d 无处理情况</h3>
<input value={value} onChange={onChange}></input>
</div>
}
3）原因分析
假设目前输入值为1234，光标移动到2后面并输入字母d ，此时输入框得到的输入值为12d34，而我们通过代码将本来应该是12d34的值修改为了1234，也就导致了光标定位到了最后一位
之所以这样处理，猜想大概是因为通过代码进行值的修改的时候存在多种情况比如
a. 1234 => 12456 位数增多
b. 1234 => 12 位数变少
c. 1234 => 5678 值全变化
浏览器实现时为了统一这种情况 只要当浏览器输入框获取的输入值与设置的值不等的时候都重置光标位置
react使用value对输入框输入值做控制的流程为： （以输入框已经输入1234 光标移动到2后面输入d为例）
1.按下d键
2.输入框获得值12d34，但是此时输入框的值受value控制，onChange事件中如果不对value做修改则不会改变输入框实际展示值 （也就是说12d34浏览器输入框内部已经获取到的值为12d34，只是页面并未变化，页面变化由input上的value控制）
3.输入框onChang事件触发，此时代码处理，会将输入框获取值由本应该设置为12d34，修改为了1234，光标重置到最后面 （即输入框内部获取的值如果不等于value值就会光标重置到最后面）
2.解决方案
1）宏任务延时处理
原理为通过input.setSelectionRange改变光标位置，具体api细节自行百度参考文档
import { useState } from "react"
export default function () {
const [value1, setValue1] = useState(1234)
const onChange1 = (e) => {
const start = e.target.selectionStart
const inputValue = e.nativeEvent.target.value
const value = inputValue.replace('d', '')
const input = e.nativeEvent.target
setValue1(value)
setTimeout(() => {
inputValue.includes('d') && input.setSelectionRange(start - 1, start - 1)
}, 0)
}
return <div style={{marginTop:200}}>
<h3>焦点修改实例：不允许输入字母 d 宏任务处理</h3>
<input value={value1} onChange={onChange1}></input>
</div>
}
输入框微任务处理.gif
虽然能够让光标位置正确，但是多次输入的时候存在光标从最后面移动到原位置的情况
2) 微任务处理（关于微任务宏任务可以自行百度了解）
import { useState } from "react"
export default function () {
const [value2, setValue2] = useState(1234)
const onChange2 = (e) => {
const start = e.target.selectionStart
const inputValue = e.nativeEvent.target.value
const value = inputValue.replace('d', '')
const input = e.nativeEvent.target
setValue2(value)
new Promise(res => {
res()
// promist.then的回调函数属于微任务
}).then(() => {
inputValue.includes('d') && input.setSelectionRange(start - 1, start - 1)
})
}
return <div style={{marginTop:200}}>
<h3>焦点修改实例：不允许输入字母 d 微任务处理</h3>
<input value={value2} onChange={onChange2}></input>
</div>
}
输入框宏任务处理.gif
3.总结
输入框onChange修改value值导致的光标定位到最后的时机在微任务和宏任务的前面，
即 顺序为 1.重置光标 => 2.微任务 =>（浏览器内部重置光标）界面重新渲染 => 3.宏任务
其中使用宏任务二者执行间隔时间跨度大，导致重置光标界面已经发生变化，宏任务执行恢复光标，导致看到光标从最后移动到代码设置的位置（即：浏览器执行恢复光标 =>界面重新渲染 ,光标移动到最后 => 代码设置光标位置 => 浏览器重新渲染，恢复到代码设置的位置）
微任务则缩小了间隔或者说顺序 （即：浏览器执行恢复光标 => 代码设置光标位置 => 浏览器重新渲染，设置为代码设置的位置）
但是该代码仅仅处理了简单的情况即每次只输入一位的情况，还存在一些边界情况未处理，例如直接复制dddd，调整输入位置，粘贴就会导致光标位置后移，此种情况就需要对原值与新输入值做对比并进行处理
网友评论