本文详解如何在 streamlit 中为 st.text_area 实现自动随内容增长的高度适配，消除滚动条，支持多列布局，并通过自定义 html/js 精准绑定原生 textarea 元素，解决 streamlit 默认组件不可直接 dom 操作的限制。
本文详解如何在 streamlit 中为 st.text_area 实现自动随内容增长的高度适配，消除滚动条，支持多列布局，并通过自定义 html/js 精准绑定原生 textarea 元素，解决 streamlit 默认组件不可直接 dom 操作的限制。
在 Streamlit 中，st.text_area 默认固定高度并启用垂直滚动条，无法原生响应内容行数变化。虽然可通过 height 参数设置静态高度，但面对用户输入或动态生成文本（如 LLM 输出），固定高度易导致截断或多余空白。真正“动态高度”的核心在于：监听 。
然而，Streamlit 渲染的
✅ 推荐方案：基于 key 的 DOM 定位 + 动态脚本注入
以下代码实现了双列布局下两个 text_area 的同步自适应高度（左侧输入区、右侧输出区），无需第三方库：
import streamlit as st import streamlit.components.v1 as components st.set_page_config(page_title="Auto-Resizing Text Areas", layout="wide") # 创建两列布局 col1, col2 = st.columns(2) with col1: user_input = st.text_area("User Input:", key="user_input", height=150) with col2: generated_text = st.text_area("Generated Output:", key="generated_output", height=150) # 注入自适应高度逻辑（关键：通过 data-testid 和 key 定位） auto_resize_js = f""" <script> // 等待 Streamlit 渲染完成 setTimeout(() => {{ // 根据 Streamlit 的 data-testid 和 key 查找 textarea const inputEl = document.querySelector('textarea[data-testid="stTextArea"][key="user_input"]'); const outputEl = document.querySelector('textarea[data-testid="stTextArea"][key="generated_output"]'); const adjustHeight = (el) => {{ if (!el) return; el.style.overflow = 'hidden'; el.style.resize = 'none'; el.style.height = 'auto'; el.style.height = el.scrollHeight + 'px'; }}; // 初始化高度 adjustHeight(inputEl); adjustHeight(outputEl); // 监听输入事件 if (inputEl) {{ inputEl.addEventListener('input', () => adjustHeight(inputEl)); }} if (outputEl) {{ outputEl.addEventListener('input', () => adjustHeight(outputEl)); }} }}, 100); </script> """ components.html(auto_resize_js, height=0)? 关键技术说明
- data-testid=”stTextArea”：Streamlit 为所有 st.text_area 自动添加该属性，是稳定的选择器依据；
- [key=”xxx”]：配合 st.text_area(key=”…”) 使用，确保唯一性，避免跨组件误匹配；
- setTimeout(…, 100)：规避 Streamlit 渲染时序问题，确保 DOM 已就绪；
- el.style.resize = ‘none’：禁用用户手动拖拽缩放，保障体验一致性；
- height=0 in components.html()：隐藏脚本容器，不占用页面空间。
⚠️ 注意事项
- 此方案依赖 Streamlit 内部 data-testid，虽当前版本（v1.30+）稳定，但属非公开 API，未来大版本升级需验证兼容性；
- 若需服务端同步（如输出区由 Python 逻辑更新），需配合 st.rerun() 或 st.experimental_rerun()（旧版）触发重绘，再由 JS 重新适配高度；
- 移动端 safari 对 scrollHeight 计算偶有偏差，建议增加最小高度兜底（如 min-height: 100px）；
- 避免在 st.form 内使用 components.html 注入脚本——表单提交会重载整个上下文，导致脚本失效。
✅ 总结
Streamlit 原生不支持动态 textarea 高度，但通过 data-testid + key 组合精准定位、延迟执行 JS 脚本、以及 scrollHeight 自动计算，可稳健实现“所见即所得”的自适应体验。该方案轻量、无外部依赖，适用于交互式 AI 应用、实时日志展示、多行表单等典型场景。建议将核心 adjustHeight 函数封装为可复用的 auto_resize_textarea(key_list) 工具函数，提升工程复用性。