blazor - 在 Blazor 中的文本或数字框中自动突出显示

Question

我在 Blazor 的初级阶段。我需要知道当点击文本框或数字框时，文本框或数字框中的文本应该会自动按照下图高亮显示。

我怎样才能使用 blazor 做到这一点？

Answer 1

您可以通过向元素添加 javascript 焦点事件处理程序来执行此操作：

onfocus="this.select()"

Answer 2

这对我有用：

_Host.cshtml

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

索引.razor

@page "/"
@inject IJSRuntime jsRuntime

<div class="form-group">
    <label>Standard</label>
    <input id="@MyID" @bind-value="@MyText" @onclick="@SelectText" />
</div>

@code {
    public string MyText { get; set; } = "text";
    public string MyID { get; set; } = "input-id1";

    async Task SelectText()
    {
        await jsRuntime.InvokeVoidAsync("selectText", MyID);
    }
}