You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

关闭Bootstrap模态框后,如何让UpdatePanel内的控件获得焦点?

解决Bootstrap模态框关闭后UpdatePanel内控件无法获得焦点的问题

你的核心问题是后台调用控件Focus()的时机早于Bootstrap模态框完全关闭的时机,加上UpdatePanel局部回发的DOM变化,导致焦点设置失效。以下是可行的解决方案:

方案1:利用Bootstrap模态框的关闭完成事件(推荐)

直接在关闭模态框的脚本中绑定hidden.bs.modal事件,确保在模态框完全关闭(包括动画结束)后再设置焦点:

Page.MaintainScrollPositionOnPostBack = False
' 注册关闭模态框并在关闭后设置焦点的脚本
ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType(), "HideErrorsAndFocus", 
    "$('#modErrors').modal('hide').on('hidden.bs.modal', function() { $('#" & txtCVRegDate.ClientID & "').focus(); });", 
    True)

这个方案仅使用少量必要的JavaScript,完美匹配Bootstrap模态框的生命周期,焦点设置准确率最高。

方案2:纯后台脚本延迟触发(接近无JS需求)

如果希望尽量减少前端代码,可以通过延迟执行焦点设置脚本,等待模态框动画结束:

Page.MaintainScrollPositionOnPostBack = False
Dim focusScript As String = "$('#" & txtCVRegDate.ClientID & "').focus();"
' 延迟300ms(Bootstrap模态框默认动画时长)执行焦点设置
ScriptManager.RegisterStartupScript(Me.Page, Me.Page.GetType(), "HideErrorsAndFocus", 
    "$('#modErrors').modal('hide'); setTimeout(function() { " & focusScript & " }, 300);", 
    True)

原代码失效原因

  1. 后台Me.txtCVRegDate.Focus()生成的焦点指令会在模态框关闭前执行,此时模态框仍处于激活状态,焦点会被模态框抢占。
  2. UpdatePanel局部回发时,服务器端的焦点指令无法感知模态框的异步动画状态,导致控件还未处于可获取焦点的状态时就执行了焦点设置。

内容的提问来源于stack exchange,提问作者sconners

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.17 06:30:02