Pynecone预填充textarea后如何避免用户编辑时光标跳至末尾

问题描述 #

使用Pynecone实现复选框预填充文本框功能后，用户编辑文本时光标会自动跳转到末尾，无法正常进行中间位置的编辑操作。

解决方案 #

核心思路是通过跟踪光标位置，在状态更新后手动恢复光标位置，避免组件重渲染导致的光标丢失。具体修改如下：

1. 更新状态类，添加光标位置跟踪逻辑 #

在State类中新增用于存储光标起始/结束位置的变量，并添加恢复光标位置的方法：

class State(pc.State):
    q1_response: str

    q1_c0: bool = False
    q1_c1: bool = False
    q1_c2: bool = False
    
    # 新增：存储光标位置
    cursor_start: int = 0
    cursor_end: int = 0

    def add_response(self, *args):
        text = ''
        if self.q1_c0:
            text += q.options[0][1] + '\n'
        if self.q1_c1:
            text += q.options[1][1] + '\n'
        if self.q1_c2:
            text += q.options[2][1] + '\n'

        self.q1_response = text.strip()
        # 等待组件更新完成后恢复光标位置
        yield
        self.restore_cursor()

    def restore_cursor(self):
        # 通过JS调用直接操作DOM恢复光标位置
        return pc.call_js(
            """
            const textarea = document.querySelector('textarea');
            if (textarea) {
                textarea.selectionStart = $cursor_start;
                textarea.selectionEnd = $cursor_end;
            }
            """,
            cursor_start=self.cursor_start,
            cursor_end=self.cursor_end,
        )

2. 修改文本框组件，监听并保存光标位置 #

在页面组件中使用use_ref获取文本框的DOM引用，自定义on_change事件处理函数，在更新文本内容的同时保存当前光标位置：

def index():
    # 创建文本框DOM引用
    textarea_ref = pc.use_ref()

    def handle_text_change(value):
        # 获取当前光标位置
        cursor_start = pc.call_js("textarea.selectionStart", textarea_ref.current)
        cursor_end = pc.call_js("textarea.selectionEnd", textarea_ref.current)
        # 将光标位置保存到状态中
        State.cursor_start = cursor_start
        State.cursor_end = cursor_end
        # 更新文本内容
        State.q1_response = value

    return pc.container(
        pc.text(q.q, font_size="1.5em"),
        pc.vstack(
            pc.checkbox(q.options[0][0] + ' - ' + q.options[0][1], on_change=State.set_q1_c0),
            pc.checkbox(q.options[1][0] + ' - ' + q.options[1][1], on_change=State.set_q1_c1),
            pc.checkbox(q.options[2][0] + ' - ' + q.options[2][1], on_change=State.set_q1_c2),

            pc.button("Add", on_click=State.add_response, bg="blue", color="white"),

            pc.text_area(
                ref=textarea_ref,
                value=State.q1_response,
                placeholder='The long answer will go here',
                on_change=handle_text_change,
                rows=8,
            ),
        ),
    )

补充说明 #

该方案通过直接操作DOM的方式绕过Pynecone组件重渲染导致的光标丢失问题，若后续官方修复了文本框更新时光标跳转的bug，可直接移除自定义光标处理逻辑，恢复原有代码结构。

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