textarea自动伸缩框 2016-12-05 代码 阅读次数：

在做表单配置时，项目遇到需要写一个回复月工作内容的页面，设计师给的初始界面就是一个只有一行的框。后台要求，必须用textarea，然后当时就想这个交互该怎么实现比较好，然后想起了新浪微博的做法：点击评论，默认显示一行，当输入的文字超过一行或者输入Enter时，输入框的高度会随着改变，直到输入完毕。顿时觉得这个细节做得挺不错的，可以效仿下。

<textarea name="textarea" id="textarea" onpropertychange="this.style.height = this.scrollHeight + 'px';"   
oninput="this.style.height='auto';this.style.height = this.scrollHeight + 'px'" style="overflow-Y: hidden;">  
</textarea>  

实际效果测试：

拓展延伸

1、height、clientHeight、scrollHeight、offsetHeight的区别
2、textarea其他两种方式实现高度自适应