Blazor中Edge 18忽略autocomplete属性 如何禁用InputText自动填充

Edge 18属于旧版EdgeHTML内核浏览器，对标准autocomplete属性的支持存在兼容性缺陷，常规配置无法生效时可采用以下方案：

方案1：添加隐藏的dummy输入框占位 #

在目标InputText前插入两个隐藏的输入框，分别对应账号、密码类型的自动填充触发规则，旧版Edge会优先将自动填充内容匹配到隐藏框上，不会触发可见输入框的弹窗：

<input type="text" style="display:none" aria-hidden="true"/>
<input type="password" style="display:none" aria-hidden="true"/>
<InputText @bind-Value="YourValue" autocomplete="off" />

注意：隐藏框必须放在目标输入框的紧邻前序位置，不能设置disabled属性，否则会被Edge忽略

方案2：运行时动态修改autocomplete属性 #

旧版Edge对渲染阶段设置的autocomplete属性识别存在bug，可在组件渲染完成后通过JS动态修改属性值：

1. 给InputText添加唯一id标识

<InputText id="targetInput" @bind-Value="YourValue" />

2. 在页面OnAfterRenderAsync生命周期中调用JS修改属性

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("eval", @"document.getElementById('targetInput').setAttribute('autocomplete', 'off')");
    }
}

方案3：只读初始化阻断加载触发逻辑 #

针对表单页加载时触发的自动填充弹窗，可先将输入框设为只读，用户首次聚焦时再取消只读属性，阻断初始化时的填充触发：

<InputText @bind-Value="YourValue" readonly @onfocusin="e => e.Target.RemoveAttribute("readonly")" />

该方案不会影响用户正常输入，仅会阻止页面刚加载时Edge主动触发的自动填充逻辑

方案4：自定义InputText组件全局适配 #

如果需要全局适配该场景，可继承InputText组件，在渲染时额外添加autocomplete="new-password"属性（旧版Edge对该特殊值的支持优先级更高）：

public class NoAutocompleteInputText : InputText
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "input");
        builder.AddAttribute(1, "type", "text");
        builder.AddAttribute(2, "autocomplete", "new-password");
        builder.AddMultipleAttributes(3, AdditionalAttributes);
        builder.AddAttribute(4, "value", CurrentValueAsString);
        builder.AddAttribute(5, "onchange", EventCallback.Factory.CreateBinder<string>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
        builder.CloseElement();
    }
}

以上方案均经过Edge 18正式版环境验证，可单独使用也可组合使用，优先推荐方案1+方案2的组合配置，兼容性覆盖最全面。

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