小技巧之textarea的动态高度计算

小技巧之textarea的动态高度计算

原理

1.创建一个P标签，只创建一个P标签就可以，使用fixed布局设置到视口以外看不见也不影响其他布局就可以； 
2.实时获取P标签的宽度；
3.实时获取当前textarea的宽度，相除后向下取整Math.floor得到一个
行数；
4.CSS设置textarea和P标签的行高，还有textarea的{resize: none;}禁用缩放功能
5.知道行高和行数后，就可以计算出来textarea的高度

可能不太精准，但是能大概率通过

示例代码

textarea {
  line-height: 20px;
  resize: none;
  /* ...other Css Code; */
}

onMounted(() => {
  const oSpan = document.createElement("p");
  oSpan.style.position = "fixed";
  oSpan.style.top = "-100px";
  document.body.appendChild(oSpan);
});

const textaearInput = (ev) => {
  const tar = ev.target;
  const val = tar.value;
  const tarWidth = tar.scrollWidth;
  oSpan.innerHTML = val;
  if (oSpan.clientWidth > tarWidth) {
    const res = Math.floor(oSpan.clientWidth / tarWidth);
    tar.style.height = ${res * 20 + 30}px;
  }
  // 默认高度
  if (!val) {
    tar.style.height = `50px`;
  }
};

效果