在禁用并重新启用后，输入框会失去焦点

前端开发 2026-07-11

我想在处理过程中禁用输入框，处理完成后再重新启用并将焦点重新放回输入框。

这种做法可以实现禁用和重新启用输入框，但重新启用时会失去焦点。如何让它重新获得焦点？

from dash import Dash, html, callback, Output, Input, dcc
from time import sleep

input_tag = dcc.Input(id='input', debounce=0.500, autoFocus=True)
output_tag = dcc.Input(id='output', disabled=True)

app = Dash(__name__,)
app.layout = [html.Div([input_tag, output_tag]),]

@callback(
   Output('output', 'value'),
   Input('input', 'value'),
   prevent_initial_call=True,
   running=[(Output('input', 'disabled'), True, False)]
)
def process(value: str):
   sleep(2)
   return value

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

Derek的方案几乎完美。应用后的代码如下：

from dash import Dash, html, callback, Output, Input, dcc
from time import sleep
import dash_bootstrap_components as dbc

input_tag = dbc.Input(id='input', debounce=500, autoFocus=True)
output_tag = dbc.Input(id='output', disabled=True)

app = Dash(__name__,)
app.layout = [
   html.Div([input_tag, dcc.Loading(
      children=html.Div(id='spinner_div'),type='circle',)]
      , style={'width': 'fit-content'}
   ),
   html.Div([output_tag]),
   ]

app.clientside_callback(
    """
    function(disabled) {
        if (disabled === false) {
            const el = document.getElementById('input');
            if (el) {
                el.focus();
            }
        }
        return window.dash_clientside.no_update;
    }
    """,
    Input('input', 'disabled')
)

@callback(
   Output('spinner_div', 'children'),
   Output('output', 'value'),
   Input('input', 'value'),
   prevent_initial_call=True,
   running=[(Output('input', 'disabled'), True, False)]
)
def process(value: str):
   sleep(1)
   return '', value

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

但有一个问题。在代码处理时，任何输入都会让输入框失去焦点：

解决方案

你可以添加一个客户端回调，当输入重新启用时，使用JavaScript获取 input 元素并设置焦点。

app.clientside_callback(
    """
    function(disabled) {
        if (disabled === false) {
            const el = document.getElementById('input');
            if (el) {
                el.focus();
            }
        }
        return window.dash_clientside.no_update;
    }
    """,
    Input('input', 'disabled')
)

在输入重新启用后，输入框就不会再丢失焦点：