.NET MAUI Blazor Android端input/textarea无法自动聚焦问题求助

问题描述 #

在.NET MAUI Blazor开发中，页面加载时尝试通过JS调用自动聚焦<input>或<textarea>标签，iOS端运行正常，但Android端无任何反应且无错误提示。当前使用的代码如下：

前端代码 #

<input type="text" @ref="myref" />
<script>
    window.exampleJsFunctions =
    {
        focusElement: function (element) {
            element.focus();
        }
    };
</script>

C#代码 #

private ElementReference myref;

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("exampleJsFunctions.focusElement", myref);
    }
}

解决方案 #

方案1：延迟执行JS聚焦调用 #

Android端WebView的渲染就绪时机通常晚于iOS，直接在OnAfterRenderAsync首次渲染时调用JS可能因元素未完全初始化失效，添加短暂延迟即可解决：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        // 给Android端预留足够渲染时间，可根据实际情况调整延迟时长
        await Task.Delay(100);
        await JSRuntime.InvokeVoidAsync("exampleJsFunctions.focusElement", myref);
    }
}

方案2：使用MAUI原生平台API处理（更可靠） #

通过Android原生代码直接控制WebView焦点并触发元素聚焦，能绕过JS在Android端的限制：

1. 定义跨平台焦点服务接口

public interface IFocusService
{
    Task FocusInputAsync();
}

2. 在Android项目中实现该接口

[assembly: Dependency(typeof(AndroidFocusService))]
namespace YourAppNamespace.Platforms.Android
{
    public class AndroidFocusService : IFocusService
    {
        public async Task FocusInputAsync()
        {
            await MainThread.InvokeOnMainThreadAsync(() =>
            {
                // 获取Blazor WebView实例
                var webView = Platform.CurrentActivity.FindViewById<MauiWebView>(Resource.Id.blazorWebView);
                if (webView == null) return;

                // 让WebView先获取焦点
                webView.RequestFocus(ViewFocusability.Focusable);

                // 执行JS聚焦目标元素
                webView.EvaluateJavaScriptAsync("document.querySelector('input').focus();");

                // 强制弹出软键盘（可选）
                var imm = (InputMethodManager)Platform.CurrentActivity.GetSystemService(Context.InputMethodService);
                imm.ShowSoftInput(webView, ShowFlags.Forced);
            });
        }
    }
}

3. 在Blazor页面中注入并调用服务

[Inject]
private IFocusService FocusService { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await FocusService.FocusInputAsync();
    }
}

方案3：配置Android WebView基础设置 #

确保WebView已启用JavaScript并允许获取焦点，在MauiProgram.cs中添加配置：

builder.Services.AddMauiBlazorWebView();

#if ANDROID
builder.Services.Configure<BlazorWebViewOptions>(options =>
{
    options.WebViewInitializer = webView =>
    {
        webView.Settings.JavaScriptEnabled = true;
        // 允许WebView获取焦点
        webView.RequestFocus(ViewFocusability.Focusable);
    };
});
#endif

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