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

 

posted @ 2022-11-08 09:21  simple-love  阅读(1119)  评论(0编辑  收藏  举报