Select 个字符（突出显示文本）在使用 Blazor 组件的 mousedown 和 mouseup 上输入

Question

与 Javascript Window.GetSelection 相同。基本上我希望能够使用 Blazor 在 html 输入中获取选定的文本。

<input type="text" value="" />

因此无论写入输入的值是什么，在鼠标选择时都将存储在一个字符串中

string mySelectedText { get; set; }

所以用户会这样做：

变量将保存这个：

mySelectedText = "selection is made";

Dom-操纵应该用 @on 完成，如 this list 所示，但我在该列表

中看不到任何 @onSelection

我试过 this suggestion 但没有成功。用户事件必须是鼠标从输入中选择文本，并且必须存储或显示所选文本。

Answer 1

解决方案是将 Javascript 与 Blazor 与 @inject IJSRuntime

在 Blazor 组件中：

@inject IJSRuntime js            
     <p @onmouseup="@GetSelectedText">Make selection with mouse on here</p>        
     <p>You highlighted: @SelectedText</p>
@code {
    public string SelectedText { get; set; }

    async Task GetSelectedText()
    {
        SelectedText = await js.InvokeAsync<string>("getSelectedText");
    }
}

和 wwwroot/html.html 中名为 getSelectedText 的 javascript 函数将其插入 webassembly.js

下方

<script>
function getSelectedText() {
    return window.getSelection().toString();
}
</script>

这解决了问题

Select 个字符（突出显示文本）在使用 Blazor 组件的 mousedown 和 mouseup 上输入

Select characters (highlight text) in input on mousedown and mouseup with Blazor Component

components

input

highlight

selectedtext

blazor