blazor - 如何将焦点设置到 InputText 元素？

Question

使用example from the Microsoft docs ，我正在尝试以编程方式将焦点设置到输入元素。

不幸的是，该示例使用标准 <input type="text">而我想用它来 InputText element .

Microsoft 示例使用一个扩展方法，该方法采用 ElementReference :

public static Task Focus(this ElementReference elementRef, IJSRuntime jsRuntime)
{
    return jsRuntime.InvokeAsync<object>(
        "exampleJsFunctions.focusElement", 
        elementRef);
}

使用InputText ，我看不出有办法获得这样的 ElementReference .

提供我自己的Focus()过载 InputText相反，编译但没有显示任何视觉结果。所以我一无所知。

我的问题

如何以编程方式将焦点设置为 InputText元素？

Answer 1

在.NET5中，情况会简单得多:

<button @onclick="() => textInput.FocusAsync()">Set focus</button>
<input @ref="textInput"/>
@code {
    ElementReference textInput;
}

注意:此功能是在 .NET5 Preview 8 中引入的因此在最终版本发布之前可能会发生变化!

还值得一提的是.NET5 RC1 JavaScript isolation通过 JS 模块导出/导入引入。因此，如果您仍然需要使用 JS 互操作，请不要污染 window 对象。

更新:.NET 5 已发布，此功能保持不变。

我还有一个很酷的Nuget package它可以为你做一些方便的 JS 技巧，例如:聚焦先前的事件元素，而无需使用 @ref 。请参阅文档 here .