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); },