input - 使用 Blazor 组件在 mousedown 和 mouseup 的输入中选择字符（突出显示文本）

Question

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

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

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

string mySelectedText { get; set; }

所以用户会这样做：

并且变量将保持这个：

mySelectedText = "selection is made";

应该按照此列表@on中所示进行 Dom 操作，但我在该列表中看不到任何内容@onSelection

我试过这个建议没有任何成功。用户事件必须是从输入中鼠标选择文本，并且必须存储或显示所选文本。

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");
    }
}

以及在 webassembly.js 下方插入 this 中命名getSelectedText的javascript funktionwwwroot/html.html

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

这解决了问题