在没有 JS 的 Blazor 中将焦点设置在 InputText 上答案

【问题标题】：Set focus on InputText in Blazor without JS在没有 JS 的 Blazor 中将焦点设置在 InputText 上
【发布时间】：2020-11-25 07:10:23
【问题描述】：

您能否告诉我是否可以在不使用 JS 的情况下使用 .Net 5 在 Blazor 中的 InputText 上设置焦点？也许我错了，但是在我设置焦点之前，我需要一个输入（而不是 InputText）的参考文档中的案例。但也许有办法做到这一点？最好的问候。

【问题讨论】：

标签： c# blazor

【解决方案1】：

Input Components的源代码

例如，我继承InputText 并扩展它以获取对底层输入元素的引用：builder.AddElementReferenceCapture(5, (__ref) => { Element = __ref; });

public class FInputText : InputText, IFocusInput
{
    public ElementReference Element { get; set; }
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.OpenElement(0, "input");
        builder.AddMultipleAttributes(1, AdditionalAttributes);
        builder.AddAttribute(2, "class", CssClass);
        builder.AddAttribute(3, "value", BindConverter.FormatValue(CurrentValue));
        builder.AddAttribute(4, "onchange", EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString));
        builder.AddElementReferenceCapture(5, (__ref) => { Element = __ref; });
        builder.CloseElement();
    }
}

现在我可以访问元素引用了，一个简单的扩展可以为我提供与FocusAsync() 相同的功能。

public static class FocusExtensions
{
    public static ValueTask FocusAsync(this IFocusInput focusInput)
        => focusInput.Element.FocusAsync();
}

我创建了一个 NuGet package，其中 5 个已完成。

这是来源的GitHub Repo。

【讨论】：

【解决方案2】：

在 .Net 5 中，您可以在 ElementReference 上使用 FocusAsync 方法，让 UI 关注该元素。

<button @onclick="() => textInput.FocusAsync()">Set focus</button>
<input @ref="textInput"/>

【讨论】：