Blazor Server登录表单无法识别密码管理器填充的值

Dropbox密码管理器填充表单时，不会触发Blazor默认绑定依赖的input或change事件，导致组件绑定属性未更新，验证失败且OnValidSubmit无法触发。以下是几个可行的解决办法：

1. 用JavaScript手动触发输入事件（最可靠） #

通过MutationObserver监听输入框的DOM值变化，当检测到值被修改但事件未触发时，手动派发input事件同步到Blazor绑定属性。

步骤： #

• 给输入框添加唯一ID：

<InputText id="login-email" @bind-Value="LoginModel.Email" class="form-control" />
<InputText id="login-password" type="password" @bind-Value="LoginModel.Password" class="form-control" />

• 在组件的OnAfterRenderAsync中注入JS逻辑：

@inject IJSRuntime JSRuntime

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("setupPasswordManagerSync", "#login-email", "#login-password");
    }
}

• 在wwwroot/js/site.js中添加监听逻辑：

window.setupPasswordManagerSync = function (emailSelector, passwordSelector) {
    const triggerInputEvent = (element) => {
        const event = new Event('input', { bubbles: true });
        element.dispatchEvent(event);
    };

    const observerConfig = { attributes: true, attributeFilter: ['value'] };
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => triggerInputEvent(mutation.target));
    });

    const emailInput = document.querySelector(emailSelector);
    const passwordInput = document.querySelector(passwordSelector);
    
    if (emailInput) observer.observe(emailInput, observerConfig);
    if (passwordInput) observer.observe(passwordInput, observerConfig);
};

2. 改用OnSubmit手动处理表单 #

跳过OnValidSubmit的自动验证依赖，手动触发绑定更新并执行验证逻辑：

示例代码： #

<EditForm Model="LoginModel" OnSubmit="HandleManualSubmit">
    <DataAnnotationsValidator />
    <ValidationSummary />

    <div class="form-group">
        <label>邮箱</label>
        <InputText id="manual-email" @bind-Value="LoginModel.Email" class="form-control" />
        <ValidationMessage For="@(() => LoginModel.Email)" />
    </div>

    <div class="form-group">
        <label>密码</label>
        <InputText id="manual-password" type="password" @bind-Value="LoginModel.Password" class="form-control" />
        <ValidationMessage For="@(() => LoginModel.Password)" />
    </div>

    <button type="submit" class="btn btn-primary">登录</button>
</EditForm>

@inject IJSRuntime JSRuntime
@inject ILoginService LoginService

private async Task HandleManualSubmit()
{
    // 先同步输入框值到绑定属性
    await JSRuntime.InvokeVoidAsync("triggerInputEvents", "#manual-email", "#manual-password");

    // 手动执行模型验证
    var validationContext = new ValidationContext(LoginModel);
    var validationResults = new List<ValidationResult>();
    bool isValid = Validator.TryValidateObject(LoginModel, validationContext, validationResults, true);

    if (isValid)
    {
        // 执行登录逻辑
        await LoginService.Login(LoginModel.Email, LoginModel.Password);
    }
    else
    {
        // 手动更新验证错误提示（可选）
        foreach (var result in validationResults)
        {
            // 可通过ValidationMessageStore添加错误
        }
    }
}

对应的JS辅助函数：

window.triggerInputEvents = function(...selectors) {
    selectors.forEach(selector => {
        const element = document.querySelector(selector);
        if (element) {
            element.dispatchEvent(new Event('input', { bubbles: true }));
        }
    });
};

3. 显式指定绑定事件（快速尝试） #

直接给输入框指定绑定事件为oninput，部分场景下可触发Blazor的绑定更新：

<InputText @bind-Value="LoginModel.Email" @bind-Value:event="oninput" class="form-control" />
<InputText type="password" @bind-Value="LoginModel.Password" @bind-Value:event="oninput" class="form-control" />

这个方法最简单，但兼容性不如前两种，可优先尝试。

内容的提问来源于stack exchange，提问作者urza.cc