关于textarea高度自适应引发的若干问题的记录

关于textarea高度自适应引发的若干问题的记录

昨天有一个笔试题，是实现textarea根据内容自适应高度的。题目基本是根据注释补全代码，做完题后自己又动手动手在本地上实现了一下，发现了一些奇怪的事。（这先不说往下看）

我一开始打算是用一个隐藏的shadow把添加的内容输入，然后获取它的scrollHeight来赋给textarea，以此实现高度自适应。

    <div style="height:0; overflow:hidden;">
        <p class="shadow"></p>
    </div>
    <div style="margin: 0 auto;width: 300px;">
        <textarea class="temp"></textarea>
    </div>

使用这个方法要注意shadow和textarea的font-size和line-height要一致，此外还要设置padding:0px;

    .temp {
   
        width: 300px;
        overflow: hidden;
        padding: 0px;
        font-size: 17px;
        line-height: 17px;
        height