We can focus an InputText Blazor element not directly but by using JavaScript in Blazor. We can set an ID for the InputText and then pass it to JavaScript using interop by method InvokeVoidAsync. In the JavaScript function, use the focus DOM input method for focusing the input element with the received ID from Blazor.
Refer to the following code snippet.
[script.js]
function focusInput(id) {
document.getElementById(id).focus();
}Refer the script file in the HTML page
[index.html/_Host.cshtml]
<head>
.....
<script src="~/script.js"></script>
....
</head>[Index.razor]
@page "/"
@inject IJSRuntime jsRuntime
<EditForm Model="@inputText">
<InputText id="@InputID" @bind-Value="inputText.TextValue">You can enter some text...</InputText>
</EditForm>
<br />
<br />
<button @onclick="Focus">FOCUS!!!</button>
@code {
public string InputID = "input-id";
public string Output = "";
public class InputTextClass
{
public string TextValue = "Some Random Text";
}
public InputTextClass inputText = new InputTextClass();
public async Task Focus()
{
await jsRuntime.InvokeVoidAsync("focusInput", InputID);
}
}
Share with