Highlight textbox content on focus

Environment

Product

TextBox for Blazor

Description

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?

Solution

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.

   JavaScript

   <script>
       function selectText(tbId) {
           var tb = document.querySelector("#" + tbId);
           if (tb.select) {
               tb.select();
           }
       }
   </script>
   

2. Call that function in the desired event like @focusin. See how to get such events here.

   Razor

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