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

Highlight textbox content on focus


Product TextBox for Blazor


As soon as I click inside the textbox, I want to select the whole text. How to highlight all the text when the input is focused?


At the time of writing, Blazor does not have native API for handling focus and selection, so you need to use JS Interop to select the textbox content.

  1. Prepare a small JavaScript function that will call the select method of the input.


        function selectText(tbId) {
            var tb = document.querySelector("#" + tbId);
            if ( {
  2. Call that function in the desired event like @focusin. See how to get such events here.


    @inject IJSRuntime _js
    <span @onfocusin="@FocusInHandler">
        <TelerikTextBox @bind-Value="@TbValue" Id="@TheTbId"></TelerikTextBox>
        string TbValue { get; set; } = "lorem ipsum";
        string TheTbId { get; set; } = "myTb";
        async Task FocusInHandler(FocusEventArgs e)
            await _js.InvokeVoidAsync("selectText", TheTbId);
In this article