textarea高度自适应自动增高撑开

方法一：div模拟textarea文本域实现高度自适应

div模拟textarea出现光标实现编辑功能，可添加此属性contenteditable=true

想获取输入内容的时候可以监听input事件

方法二：使用textarea，根据计算输入内容的宽高实时获取高度赋值给textarea，实现高度自适应（Element的textarea自适应高度是通过这个方式实现的）

主要思路：是通过添加的隐藏的textarea，将真实的value赋值给隐藏的textarea，计算其高度，并将此高度赋值给真实的textarea，最后将隐藏的textarea去掉，还支持设置展示最小行数和最大行数

示例代码：

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'
  ];
  // 获取设置在当前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高度自适应targetElement: textarea,minRows最小展示行数，maxRows：最大展示行数
  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);

  // 设置隐藏textarea的属性值
  hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`);
  //  将目标元素的value复制给隐藏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;
  
  // 存在最小展示行数
  if (minRows !== null) {
      let minHeight = singleRowHeight * minRows;
      if (boxSizing === 'border-box') {
      minHeight = minHeight + paddingSize + borderSize;
      }
      height = Math.max(minHeight, height);
      result.minHeight = `${ minHeight }px`;
  }
  // 存在最大展示行数
  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;
}
// 调用， 获取的是高度，将这个高度赋值给textarea的高度
calcTextareaHeight(inputRef['current'], 4, 7).height;