ASP.NET Core 2.0 Razor页面模态框输入框聚焦失效求助

核心问题分析 #

你遇到的初始聚焦失效，本质是焦点只能设置给可见元素，之前的方案都没踩中模态框完全显示的时机：

• autofocus属性在页面初始渲染时执行，此时模态框处于隐藏状态，浏览器不会给不可见元素分配焦点；
• 普通DOM Ready事件里调用focus()，模态框仍未完成显示/动画，元素依旧不可见；
• Razor服务器端代码仅负责页面渲染，无法干预客户端模态框显示后的交互状态。

针对性解决方案 #

假设你用的是Bootstrap模态框（Razor页面最常用的模态组件），只需监听模态框的shown.bs.modal事件（该事件在模态框完全显示、动画结束后触发），再设置焦点即可：

1. 模态框HTML代码（确保ID正确） #

<div class="modal fade" id="orderModal" tabindex="-1" role="dialog" aria-labelledby="orderModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="orderstartpick">起始点</label>
                        <input type="text" class="form-control" id="orderstartpick" name="orderstartpick">
                    </div>
                    <div class="form-group">
                        <label for="orderstartdrop">终点</label>
                        <input type="text" class="form-control" id="orderstartdrop" name="orderstartdrop">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

2. JavaScript代码（放置在页面底部或@section Scripts中） #

// 模态框显示完成后聚焦第一个输入框
$('#orderModal').on('shown.bs.modal', function () {
    $('#orderstartpick').focus();
});

// 输入框值改变时切换焦点（保留你已实现的逻辑）
$('#orderstartpick').on('change', function () {
    $('#orderstartdrop').focus();
});

非Bootstrap模态框适配 #

如果是自定义模态框，找到对应框架的"模态框显示完成"事件（比如某些UI库的open或visible事件），在事件回调中执行$('#orderstartpick').focus()即可。

额外验证点 #

• 确认orderstartpick的ID在页面中唯一，避免DOM选择错误；
• 检查输入框是否有disabled/readonly属性（你已实现值改变切换焦点，大概率不存在此问题）。

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