New to Telerik UI for Blazor? Download free 30-day trial

Focus TextBox Programmatically

Environment

Product Version 2.25.0 and later

Description

How do I focus a Blazor TelerikTextBox or any other input component programmatically?

Solution

The Telerik textboxes and inputs offer a FocusAsync method that lets you focus them with code.

The example below showcases it for a few of them, but it is available for all input components and buttons:

  • AutoComplete
  • Button
  • ComboBox
  • CheckBox
  • DateInput
  • DatePicker
  • DateRangePicker
  • DateTimePicker
  • Editor
  • MaskedTextBox
  • MultiSelect
  • NumericTextBox
  • TextArea
  • TextBox
  • TimePicker

Focus input with code

@code{
    async Task FocusTextbox()
    {
        await TextboxRef.FocusAsync();
    }

    async Task FocusNumericTextbox()
    {
        await NumericTextboxRef.FocusAsync();
    }

    async Task FocusDropdown()
    {
        await DropdownRef.FocusAsync();
    }
}

<TelerikButton OnClick="@FocusTextbox">Focus textbox</TelerikButton>
<TelerikButton OnClick="@FocusNumericTextbox">Focus numeric textbox</TelerikButton>
<TelerikButton OnClick="@FocusDropdown">Focus dropdown</TelerikButton>

<TelerikTextBox @ref="@TextboxRef" @bind-Value="@TextoboxValue"></TelerikTextBox>
<TelerikNumericTextBox @ref="@NumericTextboxRef" @bind-Value="@NumericTextoboxValue"></TelerikNumericTextBox>
<TelerikDropDownList @ref="@DropdownRef" @bind-Value="@DropdownValue" Data="@DropdownData"></TelerikDropDownList>

@code{
    TelerikTextBox TextboxRef { get; set; }
    TelerikNumericTextBox<int> NumericTextboxRef { get; set; }
    TelerikDropDownList<string, string> DropdownRef { get; set; }

    string TextoboxValue { get; set; } = "lorem ipsum";
    int NumericTextoboxValue { get; set; } = 123;
    string DropdownValue { get; set; } = "one";
    List<string> DropdownData { get; set; } = new List<string>() { "one", "two", "three" };
}

Notes

You can still use JavaScript to focus DOM elements by having a proper element reference or selector. The C# method is built on top of that. If you want more specific functionality (like selecting the text as well, a pure JS solution might be simpler).

In this article
Not finding the help you need? Improve this article