textarea高度自适应-&&-元素属性contenteditable介绍

近期实现的一个笔录页面如上图所示，考虑到笔录内容肯定会超出一行，所以我选择了使用textareas文本输入框，问题在于textarea不支持自适应高度，就是定好高度或者是行数之后，超出部分就会显示滚动条，看起来不美观。

下面分享2种实现textarea高度自适应的做法，一种是利用JS控制textarea的高度，另一种是用div元素来模拟textarea

一、textarea高度自适应

一个有最小高度（设置其rows属性或min-height）的 textarea 标签，当文字增多出现滚动条时，将它的滚动高度scrollHeight赋给height，以达到textarea高度自适应效果

【1】原生JS

【2】JQuery

【3】Vue

二、contenteditable介绍

contenteditable是HTML5新增的全局属性，有true和false两个属性值。用来指定元素内容是否可编辑。

下面是一个简单的示例，创建一个"contenteditable"属性为"true"的div元素，用户就可以编辑其内容了。div元素超出指定width会自动换行，因此不用设置高度自适应

  

      用户可以在此编辑文本