在没有JS的Blazor中将焦点设置为InputText

Question

你能告诉我在Blazor中是否可以在不使用JS的情况下将焦点设置在InputText上吗。净5？也许我错了，但在文档中的案例中，在设置焦点之前，我需要一个对输入的引用(而不是InputText(。但也许有办法做到这一点？顺致敬意，

Answer 1

输入组件的源代码

例如，这就是我继承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包，其中5个已经完成。

这是源代码的GitHub Repo。

Answer 2

In。Net 5，您可以在ElementReference上使用FocusAsync方法来关注该元素的UI。

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

Answer 3

我在中完成了此操作。Net6将焦点设置为InputText，不明白为什么它不适用。Net5.

@page "/ListCustomers"
@inherits ListCustomersBase
<EditForm Model="@model" >
<InputText id="inputText" @ref="inputText" @bind-Value="model" />

<button id="setFocus" @onclick="@buttonSetFocus_click">Set focus</button>
</EditForm>
@code{
string model = "";
InputText inputText;
void buttonSetFocus_click(EventArgs e)
{
if(inputText.Element.HasValue == true ) // don't 
{
inputText.Element.Value.FocusAsync();
}
}
}