textarea 高度自适应

浏览器的滚动条太丑，自定义的滚动条适配又不是很好，这里提供一个 textarea 高度自适应最简单的配置方法

html

<textarea
  rows="1"
  style="overflow: hidden; resize: none; box-sizing: border-box"
  oninput="this.style.height='auto';this.style.height=this.scrollHeight+'px'"
/>

scrollHeight 是包括了 padding 的，在正常方案里设置 style 的高度的时候是要减去 padding 值的，所以这里直接把 textarea 设置成 border-box，有一点需要注意：scrollHeight 是不包括 border 的宽度的，所以在需要 textarea 在 focus 是有边框效果的话，建议使用 box-shadow 来处理，否则会在输入第一个字符时，textarea 会有微小的高度跳动问题。

预览效果：

题外：有些情况下需要能垂直 resize 并且隐藏滚动条，贴上最简代码以及预览：

html

<textarea style="overflow: hidden; resize: verticla;" />

textarea 高度自适应 ​

textarea 高度自适应