页面加载时自动垂直扩展textarea以显示全部内容的实现方案

你可以通过以下几种方法实现需求，让每个textarea在页面加载时自动调整高度，完整显示所有文本：

方法1：JavaScript动态计算高度（推荐） #

页面加载完成后，遍历所有template类的textarea，根据内容的实际高度设置textarea的高度：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const textareas = document.querySelectorAll('.template');
  textareas.forEach(textarea => {
    // 先重置高度为auto，确保能获取准确的内容高度
    textarea.style.height = 'auto';
    // 用scrollHeight获取内容实际高度，直接赋值给textarea
    textarea.style.height = textarea.scrollHeight + 'px';
  });
});
</script>

把这段脚本放在HTML页面的末尾（</body>标签前）即可。原理是利用scrollHeight属性获取textarea内容的完整高度，再把这个值设为textarea的高度，避免滚动条出现。

方法2：纯CSS+辅助元素方案 #

用隐藏的div模拟textarea的内容布局，让textarea高度和div同步：

首先添加CSS样式：

.template {
  width: 100%;
  padding: 8px;
  font-family: inherit;
  border: 1px solid #ddd;
  resize: none; /* 禁止用户手动调整大小 */
}

.hidden-template {
  visibility: hidden;
  position: absolute;
  padding: 8px;
  font-family: inherit;
  width: 100%;
  white-space: pre-wrap; /* 保留文本的换行和空格，和textarea行为一致 */
  word-wrap: break-word;
}

然后修改HTML结构，给每个textarea配一个隐藏div：

<div id="templates-body" class="list_templates">
  {%for template in templates%}
    <div class="hidden-template">{{template}}</div>
    <textarea class="template" readonly>{{template}}</textarea>
  {%endfor%}
</div>

最后添加脚本同步高度：

<script>
document.addEventListener('DOMContentLoaded', function() {
  const hiddenDivs = document.querySelectorAll('.hidden-template');
  const textareas = document.querySelectorAll('.template');
  
  hiddenDivs.forEach((div, idx) => {
    textareas[idx].style.height = div.offsetHeight + 'px';
  });
});
</script>

方法3：后端预计算行数（可选） #

如果不想用前端脚本，可以在Flask后端计算每个模板的行数，直接设置textarea的rows属性：

在Flask视图函数中添加计算逻辑：

import textwrap

def calculate_rows(text, cols=80):
    # 根据textarea的列数（cols）计算文本需要的行数
    lines = textwrap.wrap(text, width=cols)
    return len(lines)

# 把模板和对应行数打包传递给前端
templates_data = [(t, calculate_rows(t)) for t in templates]
return render_template('your_page.html', templates_data=templates_data)

然后在HTML中渲染：

<div id="templates-body" class="list_templates">
  {%for template, rows in templates_data%}
    <textarea class="template" readonly rows="{{rows}}">{{template}}</textarea>
  {%endfor%}
</div>

注意：这种方法的准确性依赖于文本格式和浏览器的字体渲染，可能不如前端动态计算可靠。

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