Dash实现文本框达到最大长度时自动切换焦点

在Dash中实现输入框达到最大长度后自动聚焦下一个输入框，最可靠的方式是使用客户端回调（Clientside Callback），直接在浏览器端处理DOM事件，避免后端往返的延迟。以下是完整实现步骤：

1. 明确输入框顺序 #

你的代码已经按业务逻辑定义了输入框顺序，我们基于此实现切换：
mrnInput1 → mrnInput2 → mrnInput3 → mrnInput4 → mrnInput5 → mrnInput6 → episodeInput1

2. 添加客户端回调 #

在你的Dash App代码中插入以下客户端回调，监听每个输入框的内容变化并触发焦点切换：

from dash import Dash, html, dcc, Input, Output, State

app = Dash(__name__)

# 这里放入你提供的包含所有Textarea的html.Div布局
app.layout = html.Div([
    # 你的现有布局代码
])

# 通用焦点切换逻辑的客户端回调模板
def create_focus_switch_callback(input_id):
    app.clientside_callback(
        """
        function(value, id) {
            const inputIds = ['mrnInput1', 'mrnInput2', 'mrnInput3', 'mrnInput4', 'mrnInput5', 'mrnInput6', 'episodeInput1'];
            const currentIndex = inputIds.indexOf(id);
            
            // 输入达到最大长度时，聚焦下一个输入框
            if (value.length === 1 && currentIndex < inputIds.length - 1) {
                const nextInput = document.getElementById(inputIds[currentIndex + 1]);
                nextInput?.focus();
            }
            
            // 输入为空且按删除键时，聚焦上一个输入框
            if (value.length === 0 && currentIndex > 0) {
                const handleBackspace = (e) => {
                    if (e.key === 'Backspace') {
                        const prevInput = document.getElementById(inputIds[currentIndex - 1]);
                        prevInput?.focus();
                        document.removeEventListener('keyup', handleBackspace);
                    }
                };
                document.addEventListener('keyup', handleBackspace);
            }
            
            return value;
        }
        """,
        Output(input_id, 'value'),
        Input(input_id, 'value'),
        State(input_id, 'id'),
        prevent_initial_call=True
    )

# 为每个需要切换的输入框注册回调
for input_id in ['mrnInput1', 'mrnInput2', 'mrnInput3', 'mrnInput4', 'mrnInput5', 'mrnInput6', 'episodeInput1']:
    create_focus_switch_callback(input_id)

if __name__ == '__main__':
    app.run_server(debug=True)

3. 逻辑说明 #

• 当输入框内容长度达到maxLength=1时，自动定位到下一个输入框并调用focus()完成切换。
• 额外处理删除键场景：当前输入框为空时，按删除键会自动聚焦到上一个输入框，优化输入体验。
• prevent_initial_call=True避免页面加载时触发无效回调。

之前方法失效的原因 #

• Python回调操作autoFocus：每次回调会触发组件重新渲染，不仅有延迟，而且autoFocus仅在组件初始化时生效，后续修改无法触发聚焦。
• 独立JS脚本：若未正确绑定Dash组件的value变化事件，或在组件未渲染完成时执行代码，会导致找不到目标DOM元素，无法完成聚焦操作。

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