高度动态伸缩的输入框

上周工作中在设计图上看到了这样一个textarea框，只有底下一条线，没有高度

也就是说输入框高度不是固定的，是由输入内容决定的

思路

看到这个设计想了想没思路，立刻去找度娘，网上主流解决方案有2种：

• 监听input事件获取textarea的滚动高度，调节样式
• 属性contenteditable让height:auto的div可以编辑内容，取代textarea

1.通过事件调节高度

HTML结构并不复杂，但有人会问为什么不直接获取textarea的高度，还要做个隐藏的div容器把value再复制一遍呢？因为textarea的特性是可以被撑开，但不会自己收缩，设置样式height:auto在输入很多行后再删除几行，它的高度是不会变的。所以需要借助其他容器拿到scrollHeight，曲线救国。
优点：
兼容性好
缺点：
1.设置高度时部分浏览器有卡顿感。
2.如果组件一开始隐藏再显示，需要手动调用check方法，不够干净。

2.用div替代textarea

代码更加简单了，也没有前一种方案的缺点。唯一的瑕疵是点击不够灵敏，div经常获取不到焦点，因此加上了click事件。