Streamlit教程：如何实现动态调整文本区域高度的功能？

Question

在我的场景中，我有两个带有两个文本区域的st.columns。一个用于用户输入，另一个用于生成的文本。

是否可以使文本区域随着每一行的增加而扩展，并且去掉文本区域中的滚动条？

在测试时，我只能使用滚动条，并且我知道您可以使用st.markdown来插入HTML，但我不知道如何调用文本区域以及如何编辑这些以动态调整高度。

Answer 1

你需要编写一个小脚本来完成这项工作。请查看以下代码：

const textArea = document.querySelector('.textarea-test')

textArea.addEventListener('input',(e)=>{
textArea.style.height = "auto"
  textArea.style.height = `${textArea.scrollHeight}px`;
})

<textarea name="" id="" cols="30" rows="4" class="textarea-test"></textarea>