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>