最近遇到一个需求，视频名称初始有个生成值，并且支持可以手动修改，修改后名称过长后换行高度随内容增加。刚开始想到用input但是发现input不支持换行。后来用了textarea，用js来控制，下面是实现方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <textarea cols="30" style="height: 22px; 100px; padding: 3px 8px;" onkeyup="changeH(this)">视频</textarea> <script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script> <script> function changeH(arg) { var target = $(arg)[0]; $(arg).innerHeight(target.scrollHeight); } </script> </body> </html>
因为项目textarea有多条并且是自动生成的，所以用行内onkeyup，把this传到监听函数中,然后取得元素的原生对象，来获取scrollHeight,因为用jquery没有取到这个值。scrollHeight解释如下：
Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。
scrollHeight即是textarea内容的高度（不包括padding,border,marin），然后用把这个值设置为这个对象的innerHeight（内容的高度，不包括padding,border,margin）.即实现在手动输入textarea内容时设置其高度。实现textarea高度随内容自适应。