How do you set the focus to an InputText element?

YasminRadwan26

Save to bookmark

2022-05-20

134

This code will help you to understand how to set the focus to an input text element.

Asp.net, examples, Asp.net examples,

All Answers

YasminRadwan26

2022-05-20

need an explanation for this answer? contact us directly to get an explanation for this answer

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 to 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);
    }
}

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

How do you set the focus to an InputText element?

All Answers

Similar questions

need a help?

find thousands of online teachers now