可以使用以下方法实现textarea自适应内容高度:

  1. 使用JavaScript监听textarea的输入事件,即在用户输入文本时自动调整textarea的高度。

  2. 设置textarea的属性为"rows=1",使其默认只显示一行文本。

  3. 使用CSS样式"resize:none"来禁止用户手动调整textarea的大小。

  4. 使用JavaScript计算textarea中文本的高度,然后设置textarea的高度为该值。

下面是一个示例代码:

HTML代码:

<textarea id="myTextarea" rows="1" style="resize:none"></textarea>

JavaScript代码:

// 获取textarea元素
var textarea = document.getElementById("myTextarea");

// 监听textarea的输入事件
textarea.addEventListener("input", function() {
  // 计算textarea中文本的高度
  var textHeight = textarea.scrollHeight;
  // 设置textarea的高度为文本高度
  textarea.style.height = textHeight + "px";
});

CSS样式:

textarea {
  width: 100%;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

这样,当用户输入文本时,textarea的高度会自动调整,以适应文本内容的高度。

textarea如何自适应内容高度

原文地址: http://www.cveoy.top/t/topic/GG7 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录