contentEditable 富文本,中文输入法触发多次oninput事件解决办法
1. contentEditable富文本,没有onchange事件,有oninput事件,但是遇见中文输入法时,会触发多次,而我们只想输入结束时触发。那我们需要用到compositionstart和compositionend事件
<pre contentEditable onInput={onInput} onCompositionStart={(e) => { // 标记正在输入中文 isLock = true }} onCompositionEnd={(e) => { // 标记正在输入中文, 结束以后再去触发onInput isLock = false // 在调用 editorInput(e) }}> </pre> onInput(e) { // 正常输入 中文不触发 if (!isLock) { this.lookup(e.target.value.replace(/\s*/g,'')); } }, onCompositionStart() { isLock = true; }, onCompositionEnd(e) { // 输入中文触发 isLock = false; // 在调用 this.onInput(e); },