CSS textarea高度自适应的另类实现（HTML5 contenteditable）

最新推荐文章于 2026-05-14 06:30:16 发布

原创最新推荐文章于 2026-05-14 06:30:16 发布 · 978 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css

CSS 专栏收录该内容

8 篇文章

订阅专栏

本文探讨了一种在移动H5场景下，如何利用HTML5的contenteditable属性替代textarea，创建一个初始单行、内容换行后自动扩展高度的输入框。通过分析输入框自动调整高度的需求，提出使用div元素加contenteditable属性的解决方案，并通过监听keyup事件动态获取内容。这种方法避免了基于textarea滚动条的复杂调整，同时提供了类似块级元素自动撑开的体验。文章还给出了示例代码并总结了contenteditable的相关参考资料。

介绍

textarea相较于input输入框多了换行的功能。

但是有些场景设计下（尤其是移动H5的需求），希望输入框高度开始只有一行高，输入文字换行后，高度自动撑开。这个时候使用textarea就显得不那么好用了

经过一段时间百度，许多资料都说使用js来获取textarea的滚动条的高度信息，动态计算和调整textarea的高度。

问题

这种方法的问题是，它是基于类似监听滚动条是否出现来控制textarea高度变化。在输入文字的时候，换行若文字超过高度，则滚动条出现，然后触发js调整高度。

然而如果是删除文本的情况下，滚动条永远不会出现，这个办法就调整不了textarea的高度。就得依靠其他办法来实现。

那么此时是否可以通过尽量简单的方法来实现呢？

分析

对于自动调整textarea高度的行为来看，其实很像html 块级元素自动撑开父元素的行为。

那么如果让输入的文字写入块级元素中，那么自动扩充高度不就实现了吗。

所幸，html5为元素提供了contenteditable 属性，使元素拥有编辑的能力。

实现

<!DOCTYPE html>
<html lang="zh_CN">
<style>
  .my-textarea {
    display:inline-block; /*使宽度也能自动撑开*/
    min-width: 100px;
    max-width: 200px;
    min-height: 20px;
    outline: none;/*取消成为焦点时的边框*/
    padding: 5px 10px;
    border: 1px #ddd solid;
    border-radius: 5px;
    transition: all .2s ease;
  }
  .my-textarea:focus{
    box-shadow: 0 0 10px #aaa;
  }
</style>
<body>
  <span>标题:&nbsp;</span>
  <div id='textarea' class="my-textarea" contenteditable></div>
</body>
<script>
  let textarea = document.querySelector('#textarea');
  textarea.addEventListener('keyup',(e) => {
    console.log(textarea.textContent);
  })
</script>
</html>

如上代码（代码可以直接复制保存到.html文件打开查看效果）