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

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章