如何在Blazor中实现点击文本框或数值框时自动高亮内部内容

以下三种方案均适合入门级开发者使用，可根据自身场景选择：

方案1：原生input标签实现（无需额外配置，最简单） #

如果你用的是普通HTML input标签，直接给标签添加onfocus="this.select()"属性即可，这是HTML原生支持的能力，不需要Blazor做额外处理：

<!-- 普通文本框 -->
<input type="text" value="默认内容" onfocus="this.select()" />

<!-- 数值输入框 -->
<input type="number" value="20" onfocus="this.select()" />

方案2：Blazor内置表单组件实现 #

如果你用的是EditForm下的InputText/InputNumber等Blazor原生表单组件，直接给组件添加同样的属性即可，Blazor会自动将该特性渲染到生成的HTML标签上：

<EditForm Model="@testModel">
    <InputText @bind-Value="@testModel.UserName" onfocus="this.select()" />
    <InputNumber @bind-Value="@testModel.Age" onfocus="this.select()" />
</EditForm>

@code {
    private TestModel testModel = new();
    private class TestModel
    {
        public string UserName { get; set; } = "默认用户名";
        public int Age { get; set; } = 25;
    }
}

方案3：封装通用复用组件 #

如果多个页面都需要用到这个效果，可以封装成自定义组件，避免重复编写属性：

// Shared/AutoSelectInputText.razor
<InputText @attributes="AdditionalAttributes" 
           Value="@Value" 
           ValueChanged="@ValueChanged" 
           ValueExpression="@ValueExpression" 
           onfocus="this.select()" />

@code {
    [Parameter]
    public string Value { get; set; }
    [Parameter]
    public EventCallback<string> ValueChanged { get; set; }
    [Parameter]
    public System.Linq.Expressions.Expression<Func<string>> ValueExpression { get; set; }
    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> AdditionalAttributes { get; set; }
}

使用时直接调用封装好的组件即可：

<AutoSelectInputText @bind-Value="@testModel.UserName" />

内容的提问来源于stack exchange，提问作者buddhi chamalka