如何在Blazor中将焦点设置为文本框

Question

如何在Blazor中将焦点设置为文本框？到目前为止，我们找到的唯一方法就是使用JavaScript。

Answer 1

.Net 5(或更高版本(让这一切变得简单！

<input type="text" @ref="myref"/>
@code {
private ElementReference myref;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await myref.FocusAsync();
}
}
}

Answer 2

如果你有一个像InputNumber这样的内置类型，并且你正在使用.Net6，你可以应用@Alexandre的解决方案，但有一些类似的更改：

<InputNumber @ref="MyRef" @bind-Value="MyValue" />
<button class="btn btn-primary" @onclick="MyClick"> Click me </button>
private InputNumber<int> MyRef;
private int MyValue {get; set;}
//Some click event
private void MyClick()
{
if(MyRef.Element.HasValue) 
{
MyRef.Element.Value.FocusAsync();
}
}

Answer 3

没有其他方法可以做到…您可以使用JSInterop来做到这一点，如下所示：

<input type="text" @ref="myref"/>
@code {
private ElementReference myref;
[Inject] IJSRuntime JSRuntime { get; set; }
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await 
JSRuntime.InvokeVoidAsync("exampleJsFunctions.focusElement", myref);
}
}
}

JavaScript

<script>
window.exampleJsFunctions =
{
focusElement: function (element) {
element.focus();
}
};
</script>

希望这能帮助。。。

Answer 4

这个演示通过点击按钮将焦点设置为文本框来显示这一点。

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

Answer 5

对于我们这些使用第三方控件的人，提供者应该有一个等效的元素引用，以使Alexandre的答案有效(DotNet5及以上(

<RadzenTextBox @ref="searchBox" Name="SearchPhrase" @bind-Value=@SearchString MaxLength="400" @oninput=@(args => OnChangedSearch(args.Value.ToString())) @onkeydown="@Enter" />

@code{   
RadzenTextBox searchBox;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await searchBox.Element.FocusAsync(); //NOTE: this is for Radzen "elements"
}
}
}