在Blazor中设置inputttext焦点在开始屏幕上

Question

我正在使用Visual Studio 2019创建一个Blazor PWA应用程序。我使用javascript在启动和某些关键事件期间将焦点设置为InputText字段。

function focusInput(id){
document.getElementById(id).focus();
var tb = document.querySelector("#" + id);
if (tb.select) {
tb.select();
}
}

在后面的代码中像这样调用

private string inputID = "user-id";
protected async override Task OnAfterRenderAsync(bool firstRender)
{
await jsInterop.InvokeVoidAsync("focusInput", inputID);
}

这是剃刀页

<EditForm Model="@login" class="card card-body mt-2">
<div class="form-group row">
<label for="userid" class="col-sm-2 col-form-label">User ID</label>
<InputText id="@inputID" class="form-control" @bind-Value="@login.UserID" @onkeyup="(KeyboardEventArgs e) => KeyUpUserIDAsync(e)"/>
</div>
<div class="form-group row">
<label for="message" class="col-sm-2 col-form-label">Message</label>
<InputTextArea id="textarea-message" class="form-control" @bind-Value="@errorMessage" />
</div>
</EditForm>

它工作得很好，除了当我运行它并加载第一页，这是登录页。焦点不是在字段中获得，而是留在URL栏中。如果我刷新页面，InputeText得到焦点。请注意，我登录后导航到的所有其他页面都没有这个问题。只是最初的一页。我写信给控制台，以确保它被调用，它是。我也试过使用自动对焦属性，但它也不起作用。

Answer 1

我可以按照下面提供的解决方案使您的代码工作:

如何设置焦点到inputttext元素?

Index.razor

@page "/"
@inject IJSRuntime JSRuntime
<EditForm Model="@login" class="card card-body mt-2">
<div class="form-group row">
<label for="userid" class="col-sm-2 col-form-label">User ID</label>
<InputText id="@inputID" class="form-control" @bind- 
Value="@login.UserID" @onkeyup="(KeyboardEventArgs e) => 
KeyUpUserIDAsync(e)" />
</div>
<div class="form-group row">
<label for="message" class="col-sm-2 col-form- 
label">Message</label>
<InputTextArea id="textarea-message" class="form-control" @bind- 
Value="@errorMessage" />
</div>
</EditForm>
@code {
public class LoginModel
{
public string UserID { get; set; }
}
public LoginModel login = new();
public string inputID = "user-id";
public string errorMessage = null;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
await JSRuntime.InvokeVoidAsync("focusElement", inputID);
}
}
async Task KeyUpUserIDAsync(KeyboardEventArgs e)
{
}
}

_Host.cshtml

<script>
function focusElement(id) {
const element = document.getElementById(id);
element.focus();
}
</script>

我运行了几次应用程序，每次它加载登录输入都立即获得焦点，而不需要我刷新页面。