Streamlit技术咨询：如何将文本框选中内容作为后端函数输入？

Streamlit原生没有提供直接获取文本框（st.text_area）选中内容的API，但可以通过**自定义JavaScript + Streamlit会话状态（Session State）**来实现需求，具体步骤如下：

实现思路 #

1. 用st.text_area创建文本输入区域
2. 嵌入自定义JavaScript代码，监听文本框的选中文本事件，将选中内容传递到Streamlit的会话状态
3. 点击按钮后，从会话状态中读取选中内容，作为后端函数的输入

完整代码示例 #

import streamlit as st
from streamlit.components.v1 import html

# 初始化会话状态，用于存储选中的文本
if "selected_text" not in st.session_state:
    st.session_state.selected_text = ""

# 自定义JavaScript：监听文本框选中文本，传递到session state
js_code = """
<script>
// 获取text_area元素（Streamlit的text_area会生成带有stTextArea类的textarea）
const textArea = document.querySelector('.stTextArea textarea');

// 监听选中文本事件
textArea.addEventListener('selectionchange', () => {
    const selected = textArea.value.substring(textArea.selectionStart, textArea.selectionEnd);
    // 通过Streamlit的消息机制将选中内容传递到后端
    window.parent.postMessage({
        type: 'streamlit:setComponentValue',
        value: selected
    }, '*');
});
</script>
"""

# 创建文本输入区域
text_input = st.text_area("请输入或编辑文本", height=200)

# 嵌入JS代码
html(js_code)

# 创建按钮，点击后处理选中内容
if st.button("处理选中文本"):
    if st.session_state.selected_text:
        # 这里替换为你的后端函数逻辑
        st.success(f"已获取选中文本：{st.session_state.selected_text}")
        # 示例：调用后端函数
        # your_backend_function(st.session_state.selected_text)
    else:
        st.warning("未选中任何文本，请先选中文本内容")

关键细节说明 #

• JS监听事件：通过selectionchange事件实时捕获文本框的选中文本，利用substring(selectionStart, selectionEnd)获取选中范围的内容
• 数据传递：通过window.parent.postMessage将选中内容发送给Streamlit，Streamlit会自动将值更新到会话状态的selected_text中
• 兼容性：该方案适配Streamlit的主流版本（>=1.20.0），如果页面存在多个文本区域，需要调整querySelector的选择器来精准定位目标文本框

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