首页 > 其他分享 >contentEditable 富文本,中文输入法触发多次oninput事件解决办法

contentEditable 富文本,中文输入法触发多次oninput事件解决办法

时间:2022-11-08 09:37:20浏览次数:75  
标签:触发 中文 isLock contentEditable 输入法 oninput 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);
   },

 

标签:触发,中文,isLock,contentEditable,输入法,oninput,onInput
From: https://www.cnblogs.com/plBlog/p/16868570.html

相关文章