实现textarea高度随内容自适应：现有代码无效求助

问题根源分析 #

你的代码里有几个关键错误导致高度计算异常：

• textarea内容赋值错误：你用innerHTML给textarea设置内容，但textarea是表单元素，内容要通过value属性设置，用innerHTML不会让浏览器正确识别文本内容，自然scrollHeight会是0。
• 高度计算时机错误：你在把textarea添加到DOM之前就调用了updateHeight，有些浏览器中未挂载到DOM的元素scrollHeight无法正确计算。
• 额外CSS类干扰：line-clamp类的样式（比如overflow: hidden、-webkit-line-clamp）会影响scrollHeight的获取，导致高度计算不准。

修正后的代码 #

cargarClases() {
  var containerGeneral = document.querySelector(".bimContainer").querySelector(".containerInfo--list").querySelector("nav").querySelector("ul");

  // 把updateHeight函数提到循环外，避免重复创建
  function updateHeight(el) {
    // 重置高度，确保scrollHeight能正确计算
    el.style.height = 'auto';
    // 加上border和padding的高度，避免内容被截断
    el.style.height = el.scrollHeight + 'px';
  }

  for (let i = 0; i < 15; i++) {
    var li = document.createElement('li');
    li.classList.add("classDesplegable");
    containerGeneral.appendChild(li);

    var image1 = document.createElement('img');
    image1.src = '../view/manageproject/img/FlechaBim.svg';
    li.appendChild(image1);

    var p = document.createElement('p');
    p.innerHTML = "Nombre de la clase";
    li.appendChild(p);

    var ul = document.createElement('ul');
    ul.classList.add("dNone");
    containerGeneral.appendChild(ul);

    for (let j = 0; j < 4; j++) {
      var li1 = document.createElement('li');
      ul.appendChild(li1);

      var p = document.createElement('p');
      p.innerHTML = "Nombre de la c...";
      p.classList.add("textClass");
      li1.appendChild(p);

      var p2 = document.createElement('p');
      p2.innerHTML = "Nombre de la c...";
      p2.classList.add("textClass2");
      li1.appendChild(p2);

      var textarea = document.createElement("textarea");                  
      textarea.maxLength = 44;
      // 用value设置textarea内容
      textarea.value = "P1D30Tr0M0sC0WMul3P1D30Tr0M0sC0WMul3";

      if (i % 2 == 0) {
        textarea.classList.add("textArea");
        // 移除line-clamp，或者如果必须保留，需调整高度计算逻辑（但会和自动高度冲突）
        // textarea.classList.add("line-clamp");
      } else {
        textarea.classList.add("textArea");
      }
      
      // 先把textarea添加到DOM
      li1.appendChild(textarea);
      // 再调用高度更新
      updateHeight(textarea);

      textarea.addEventListener('input', () => updateHeight(textarea));

      var check = document.createElement('input');
      check.type = 'checkbox';
      check.classList.add("inputCheck2");
      li1.appendChild(check);
    }
  }
}

额外注意事项 #

1. CSS样式调整：确保textArea类设置了正确的盒模型，避免高度计算偏差：

.textArea {
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid #ccc;
  height: auto; /* 去掉固定高度，让JS控制 */
  resize: none; /* 可选：禁止用户手动调整大小 */
}

2. 关于line-clamp：如果必须保留line-clamp类，它的-webkit-line-clamp属性会限制显示行数，和自动高度的需求冲突，建议只在textarea禁用时使用，此时不需要自动高度调整。

内容的提问来源于stack exchange，提问作者Dario