textarea 内容自适应，高度向上扩展

Dreamy_lin

已于 2024-01-07 11:37:48 修改

阅读量629

点赞数 7

分类专栏：前端文章标签： css javascript 前端

于 2024-01-07 11:36:19 首次发布

本文链接：https://blog.csdn.net/Dreamy_LIN/article/details/135437456

版权

前端专栏收录该内容

24 篇文章 0 订阅

订阅专栏

效果：

原理：

监听 textarea 的 input 事件的 scrollHeight 变化（scrollHeight 元素内容高度），赋值给 height。

再给 textarea 设置最大最小高度，padding 为 0（它自身的），保证上下限。

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
      }
      .wrapper {
        height: 100vh;
        display: flex;
        flex-direction: column;
        color: white;
      }
      nav {
        height: 60px;
        background-color: blue;
        position: fixed;
        width: 100%;
      }
      main {
        margin-top: 60px;
        background-color: pink;
        height: 100%;
        flex: 1;
      }

      footer {
        background-color: red;
        width: 100%;
        display: flex;
      }

      textarea {
        min-height: 50px;
        max-height: 300px;
        padding: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <nav>nav</nav>
      <main>main</main>
      <footer>
        <textarea></textarea>
      </footer>
    </div>
    <script>
      var textarea = document.querySelector("textarea");

      textarea.addEventListener("input", (e) => {
        textarea.style.height = 50 + "px"; // 删除文本内容，调整高度
        textarea.style.height = e.target.scrollHeight + "px";
      });
    </script>
  </body>
</html>