textbox-select-in-focus.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
Highlight textbox content on focus	How to select all the textbox content on click or focus.	how-to	Highlight textbox content on focus	textbox-kb-select-in-focus			1480268	kb

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.

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

1. 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>
</span>

@code{
    string TbValue { get; set; } = "lorem ipsum";
    string TheTbId { get; set; } = "myTb";

    async Task FocusInHandler(FocusEventArgs e)
    {
        await _js.InvokeVoidAsync("selectText", TheTbId);
    }
}