ASP.NET Core MVC：页面加载时设置输入框聚焦失效问题求助

问题背景 #

在ASP.NET Core MVC视图中，尝试通过window.load事件监听设置第一个未聚焦输入框的焦点，但仅手动刷新页面或从Visual Studio预览时生效，编程式刷新和setTimeout均无法达到预期效果（浏览器为Microsoft Edge）。

解决方案 #

方案1：使用HTML原生autofocus属性（推荐）

这是最可靠、最简单的实现方式，直接让浏览器原生处理焦点设置，无需额外JavaScript：

修改Start.cshtml中的第一个输入框，添加autofocus属性：

<input class="user-property-input" id="UserName" name="UserName" type="text" autofocus />

方案2：优化JavaScript事件监听逻辑

如果必须通过JavaScript实现，将事件从window.load改为DOMContentLoaded（DOM树构建完成即触发，早于window.load，避免焦点被后续系统操作抢占），同时简化元素选择逻辑：

修改start.js内容：

document.addEventListener("DOMContentLoaded", function() {
    // 直接选择第一个输入框（页面加载时默认无输入框聚焦）
    const element = document.querySelector("input.user-property-input:first-of-type");
    if (element instanceof HTMLInputElement) {
        element.focus({ focusVisible: true });
        // 验证焦点状态
        const isFocused = document.activeElement === element;
        const message = `${element.id} is ${isFocused ? "" : "not"} focused`;
        const span = document.querySelector("span#test-focus-span");
        if (span instanceof HTMLSpanElement) {
            span.innerText = message;
        }
        console.log(message);
    }
});

原因分析 #

1. window.load触发时机过晚：该事件需等待页面所有资源（图片、样式表等）加载完成才执行，此时浏览器可能已完成页面初始化的其他焦点操作（如地址栏聚焦），导致JavaScript设置的焦点被覆盖。
2. DOMContentLoaded更适合DOM操作：仅等待DOM树构建完成即触发，此时还未执行后续的系统焦点初始化逻辑，能确保输入框优先获得焦点。
3. 原选择器冗余：页面加载时默认无输入框被聚焦，无需使用input:not(:focus)，直接选择第一个输入框即可。

完整代码示例 #

修改后的Start.cshtml：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <form action="javascript:void(0);" method="post" style="width:500px;height:300px;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;">
            <fieldset style="flex:auto;display:flex;flex-direction:column;justify-content:space-evenly;">
                <legend>Authentication</legend>
                <label id="username-label" for="UserName">User name:</label>
                <input class="user-property-input" id="UserName" name="UserName" type="text" autofocus />
                <label id="email-label" for="Email">E-Mail:</label>
                <input class="user-property-input" id="Email" name="Email" type="email" />
                <label id="phone-label" for="PhoneNumber">Phone number:</label>
                <input class="user-property-input" id="PhoneNumber" name="PhoneNumber" type="tel" />
            </fieldset>
            <span id="test-focus-span" style="margin-top:15px;"></span>
        </form>
        <script id="start" src="~/src/start.js" asp-append-version="true"></script>
    </body>
</html>

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