自动调整多行标签的自定义文本字段的大小

基础概念

自动调整多行标签的自定义文本字段的大小是指在用户输入或编辑文本时，文本字段能够根据内容的多少自动调整其高度，以适应显示所有文本内容，而不需要用户手动滚动查看。

类型

基于内容的自动调整：根据文本内容的长度和行数自动调整高度。
基于字数的自动调整：根据预设的字数限制自动调整高度。
基于视口的自动调整：根据浏览器视口的大小自动调整高度。

应用场景

评论区：用户发表评论时，评论框可以根据输入内容的多少自动调整大小。
表单填写：在填写长文本信息的表单中，如“备注”或“描述”字段。
聊天应用：聊天消息输入框可以根据输入的消息长度自动调整高度。

实现方法

以下是一个使用HTML和CSS实现自动调整多行文本框大小的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Auto Resize Textarea</title>
<style>
  textarea {
    width: 100%;
    min-height: 40px; /* 设置最小高度 */
    resize: none; /* 禁止用户手动调整大小 */
    overflow: hidden; /* 隐藏滚动条 */
  }
</style>
</head>
<body>

<textarea id="autoResizeTextarea" placeholder="Type something..."></textarea>

<script>
  const textarea = document.getElementById('autoResizeTextarea');
  textarea.addEventListener('input', function () {
    this.style.height = 'auto'; // 先重置高度为自动
    this.style.height = this.scrollHeight + 'px'; // 再设置为实际内容高度
  });
</script>

</body>
</html>