方法一：div模擬textarea文本域?qū)崿F(xiàn)高度自適應(yīng)

div模擬textarea出現(xiàn)光標(biāo)實(shí)現(xiàn)編輯功能，可添加此屬性contenteditable=true

<div contenteditable="true"></div>

想獲取輸入內(nèi)容的時(shí)候可以監(jiān)聽(tīng)input事件

方法二：使用textarea，根據(jù)計(jì)算輸入內(nèi)容的寬高實(shí)時(shí)獲取高度賦值給textarea，實(shí)現(xiàn)高度自適應(yīng)（Element的textarea自適應(yīng)高度是通過(guò)這個(gè)方式實(shí)現(xiàn)的）

主要思路：是通過(guò)添加的隱藏的textarea，將真實(shí)的value賦值給隱藏的textarea，計(jì)算其高度，并將此高度賦值給真實(shí)的textarea，最后將隱藏的textarea去掉，還支持設(shè)置展示最小行數(shù)和最大行數(shù)

示例代碼：

const calculateNodeStyling = (targetElement) => {
  const CONTEXT_STYLE = [
      'letter-spacing',
      'line-height',
      'padding-top',
      'padding-bottom',
      'font-family',
      'font-weight',
      'font-size',
      'text-rendering',
      'text-transform',
      'width',
      'text-indent',
      'padding-left',
      'padding-right',
      'border-width',
      'box-sizing'
  ];
  // 獲取設(shè)置在當(dāng)前textarea上的css屬性
  const style = window.getComputedStyle(targetElement);

  const boxSizing = style.getPropertyValue('box-sizing');

  const paddingSize = (
      parseFloat(style.getPropertyValue('padding-bottom')) +
      parseFloat(style.getPropertyValue('padding-top'))
  );

  const borderSize = (
      parseFloat(style.getPropertyValue('border-bottom-width')) +
      parseFloat(style.getPropertyValue('border-top-width'))
  );

  const contextStyle = CONTEXT_STYLE
      .map(name => `${name}:${style.getPropertyValue(name)}`)
      .join(';');

  return { contextStyle, paddingSize, borderSize, boxSizing };
}

export const calcTextareaHeight = (
  targetElement,
  minRows = 1,
  maxRows = null
  ) => { // textarea高度自適應(yīng)targetElement: textarea,minRows最小展示行數(shù)，maxRows：最大展示行數(shù)
  const HIDDEN_STYLE = `
      height:0 !important;
      visibility:hidden !important;
      overflow:hidden !important;
      position:absolute !important;
      z-index:-1000 !important;
      top:0 !important;
      right:0 !important
  `;
  let hiddenTextarea;
  if (!hiddenTextarea) {
      hiddenTextarea = document.createElement('textarea');
      document.body.appendChild(hiddenTextarea);
  }

  let {
      paddingSize,
      borderSize,
      boxSizing,
      contextStyle
  } = calculateNodeStyling(targetElement);

  // 設(shè)置隱藏textarea的屬性值
  hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
  //  將目標(biāo)元素的value復(fù)制給隱藏textarea
  hiddenTextarea.value = targetElement.value || targetElement.placeholder || '';
  // 獲取隱藏textarea的輸入高度
  let height = hiddenTextarea.scrollHeight;
  const result = {};

  if (boxSizing === 'border-box') {
      height = height + borderSize;
  } else if (boxSizing === 'content-box') {
      height = height - paddingSize;
  }

  hiddenTextarea.value = '';
  let singleRowHeight = hiddenTextarea.scrollHeight - paddingSize;
  
  // 存在最小展示行數(shù)
  if (minRows !== null) {
      let minHeight = singleRowHeight * minRows;
      if (boxSizing === 'border-box') {
      minHeight = minHeight + paddingSize + borderSize;
      }
      height = Math.max(minHeight, height);
      result.minHeight = `${ minHeight }px`;
  }
  // 存在最大展示行數(shù)
  if (maxRows !== null) {
      let maxHeight = singleRowHeight * maxRows;
      if (boxSizing === 'border-box') {
      maxHeight = maxHeight + paddingSize + borderSize;
      }
      height = Math.min(maxHeight, height);
  }
  result.height = `${ height }px`;
  hiddenTextarea.parentNode && 
  hiddenTextarea.parentNode.removeChild(hiddenTextarea);
  hiddenTextarea = null;
  return result;
}
// 調(diào)用， 獲取的是高度，將這個(gè)高度賦值給textarea的高度
calcTextareaHeight(inputRef['current'], 4, 7).height;