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

Posted 2023-03-27

【中文标题】在 Blazor 中的文本或数字框中自动突出显示

【英文标题】：Auto highlighting in text or numeric box in Blazor

【发布时间】：2021-11-24 15:24:00

【问题描述】：

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

如何使用 blazor 做到这一点？

【参考方案1】：

您可以通过向元素添加 javascript 焦点事件处理程序来做到这一点：

onfocus="this.select()"

【参考方案2】：

这对我有用：

_Host.cshtml

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

Index.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);
    
 

【讨论】：

@Sergio Junior 的答案大约有 10 个字符长并且有效。 JS 互操作不是必需的。

我们不能不使用javascript吗？？

@Buddhi，有可能，但我找不到怎么做。 Blazor 不像 Javascript 那样对 DOM 有完整的控制，所以有时你可能需要像我在这个例子中那样集成几行 JS。

您可以考虑的一件事是创建一个输入组件来执行上述行为并在整个代码中使用它。这是 Blazor 的方式。