textarea 高度自适应（chrome有效）

首先想到的方法就是通过js检测文本的高度，然后动态设置文本框的高度。

这是我的第一想法，也是最容易实现的想法。

具体思路：当出现滚动条的时候，文本的实际高度就是**scrollHeight**，我们只需要设置文本框的高度为内容的**scrollHeight**即可。

代码实现：

<title>demo1</title>
    <style>
        textarea {
            width: 200px;
            min-height: 100px;
            padding: 0;
        }
     </style>
</head>
<body>
    <textarea placeholder="input..."></textarea> 
</body>
<script>
    var textarea = document.querySelector('textarea');
    
    textarea.addEventListener('input', (e) => {
        textarea.style.height = '100px';
        textarea.style.height = e.target.scrollHeight + 'px';
    });
 </script>
</html>

留下评论