使用組件 fusion.design Input.TextArea，屬性 composition開啟后會過濾輸入法中間字母狀態(tài)铜靶，文字輸入完成后才會觸發(fā) onChange
<Input.TextArea
value={value}
composition
onChange={handleChange}
/>
const [value, setValue] = useState('')
const [cursorPos, setCursorPos] = useState([0, 0])
const handleChange = (value, event) => {
// console.log(value, event.target.value, event.target.selectionStart)
const start = event.target.selectionStart
const end = event.target.selectionEnd
// 過濾非中文字符
// 一-龥: 匹配中文字符叔遂。
// \p{P}: 匹配 Unicode 中的所有標(biāo)點(diǎn)符號。
// \u3000-\u303F: 匹配全角空格及一些中文標(biāo)點(diǎn)符號旷坦。
// \uFF00-\uFFEF: 匹配全角字符及一些特殊符號掏熬。
// \n: 允許回車符佑稠。
const filteredValue = value.replace(/[^一-龥\p{P}\u3000-\u303F\uFF00-\uFFEF\n]/gu, '')
// 計(jì)算新的光標(biāo)位置
let newStart = start
let newEnd = end
if (filteredValue.length !== value.length) {
// 如果過濾后長度發(fā)生了變化秒梅，需要重新計(jì)算光標(biāo)位置
const diff = value.length - filteredValue.length
newStart -= diff
newEnd -= diff
}
// 設(shè)置新的值
setValue(filteredValue)
// setValue(value)
// 記錄光標(biāo)位置
setCursorPos([newStart, newEnd])
}
useEffect(() => {
// 每次值變化后調(diào)整光標(biāo)位置
const inputEl = document.activeElement
if (inputEl && inputEl.setSelectionRange) {
console.log(inputEl)
inputEl.setSelectionRange(cursorPos[0], cursorPos[0])
}
}, [value, cursorPos])
