可编辑div遇到的那些事

        在日常开发中有时可能会遇到input 或 textarea 不能满足的开发场景，比如多行输入的情况下，textarea 的右下角icon 无法去除, 所以此时可以使用div 设置可编辑状态，完成功能开发，在开发的过程中仍会遇到一下问题。

1，如何设置div使其变成可编辑状态

 通过给div 添加 :contenteditable="true" 可以开启编辑状态,

 2，设置placeholder

 &__text{
        &:empty::before{
          display: inline-block;
          width:100%;
          content: attr(placeholder-pc);
          color: var(--t-font-color-gy3);
          cursor: text;
        }

        &:not(:empty)::before{
          content:none;
        }
      }

 3，粘贴事件

@paste="handlePaste"

 /**
      * 处理粘贴事件
      * @param event 剪贴板事件
      */
    function handlePaste(event: ClipboardEvent) {
      event.preventDefault();
      const clp = event.clipboardData;
      const text = clp?.getData('text/plain') || '';
      if (text !== '') {
        document.execCommand('insertText', false, text);
      }
    }

 4，获取输入文本长度px

/**
 * @description: 计算输入文本所占的px长度
 * @param {*} text 输入的文本
 * @return {*}
 */
export function calculateInputLength(text:string) {
  const dom = document.createElement('div');
  dom.style.position = 'absolute';
  dom.style.visibility = 'hidden';
  dom.style.display = 'inline-block';
  dom.style.width = 'auto';
  dom.style.height = '0px';
  dom.style.fontSize = '14px';
  dom.style.whiteSpace = 'nowrap';
  dom.innerHTML = text;
  document.body.appendChild(dom);
  const testWidth = dom.offsetWidth;
  document.body.removeChild(dom);
  return testWidth;
}

 5，输入处理，获取输入的文本内容

 通过 @input 事件绑定输入处理方法
 const handleInput = async (event: InputEvent) => {
      // state.isComposing 用来判断当前是否是中文输入法输入 第7步介绍
      if (state.isComposing || event.data === '') {
      // 如果进行的是中文输入法输入，或者输入的是空格，则不保存输入文本
        return;
      }
      // 添加输入文本长度检测
      // 否则的话可以根据event.target.innerText.trim() 获取输入的文本
      state.messageInfo =  cloneDeep((event?.target as HTMLElement)?.innerText?.trim());
      // 第6部将光标设置到文本末尾
      next(()=>{
           // 将光标设置到文本末尾
      })
}

 6，设置光标位置于内容文本末尾

/**
 * @description: 可编辑多行文本，设置光标聚焦文本末尾
 * @param {HTMLElement} dom 要编辑的dom元素
 * @return {*}
 */
export const setCursorTAtTextEnd = (dom:HTMLElement) => {
  dom?.focus();
  const range = document.createRange();
  const selection = window.getSelection() as any;
  range.selectNodeContents(dom);
  range.collapse(false);
  selection.removeAllRanges();
  selection.addRange(range);
};

 7，中文输入法处理

        通过 @compositionstart="messageInputStart"，及@compositiοnend="messageInputEnd" 对中文输入法状态进行处理

/**
     * @description: 键盘中文输入法开始
     * @param {*} event
     * @return {*}
     */
    const messageInputStart = (event:Event) => {
      // 只有中文输入法才会触发
      state.isComposing = true;
    };
 
/**
     * @description: 键盘输入结束
     * @param {*} event
     * @return {*}
     */
    const messageInputEnd = (event: CompositionEvent) => {
      // 中文输入法结束
      state.isComposing = false;
      handleInput(event as any);
    };