获取Blazor文本输入的插入符位置

Question

我正在处理Blazor文本区域输入。我想要实现的是，只要用户键入“ @”字符，我就会弹出一个小窗口，他们可以从中选择内容。无论他们选择什么，我都会在他们键入“ @”之后将其插入文本区域。

我有这个HTML：

<textarea rows="10" class="form-control" id="CSTemplate" @bind="original" @oninput="(e => InputHandler(e.Value))" @onkeypress="@(e => KeyWasPressed(e))"></textarea>

代码是：

protected void InputHandler(object value)
{
    original = value.ToString();
}

private void KeyWasPressed(KeyboardEventArgs args)
{
    if (args.Key == "@")
    {
        showVariables = true;
    }
}

protected void AddVariable(string v)
{
    original += v + " ";
    showVariables = false;
}

这很好。 showVariables布尔值是我如何控制弹出窗口，而AddVariable函数是如何将所选文本添加回textarea。

但是，有一个小问题。如果我已经键入了某些文本，然后又回到了先前的位置并键入了“ @”，菜单仍然会弹出没有问题，但是当用户选择文本并且插入内容当然只会附加到末尾文本。我在尝试获取“ @”时的插入符号的确切位置时遇到了麻烦，因此我仅将文本附加在“ @”之后，而不是在输入的末尾。

非常感谢！

Answer 1

我知道了-我能够使用JSInterop获取光标位置$（'＃CSTemplate'）。prop（“ selectionStart”）并将值保存在变量中。然后，稍后在AddVariable函数中使用该值。

Answer 2

您可以在InputHandler中设置条件，当您检查@以查看是否输入@时，您还可以获取长度，以了解它是@还是在其前后都有一些字符显然，当长度为1且值为@时，意味着只有一个@，并且如果长度大于1，则...

Answer 3

我做了快速演示应用，请检查它https://github.com/Lupusa87/BlazorDisplayMenuAtCaret