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

【问题标题】：Get the caret position for Blazor text input获取 Blazor 文本输入的插入符号位置
【发布时间】：2020-03-29 13:43:53
【问题描述】：

我正在处理 Blazor 文本区域输入。我想要实现的是每当用户输入“@”字符时，我都会弹出一个小窗口，他们可以从中选择一些东西。无论他们选择什么，我都会将该文本插入到 textarea 中，就在他们键入“@”的位置之后。

我得到了这个 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 函数是我将选定文本添加回文本区域的方式。

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

非常感谢！

【问题讨论】：

标签： asp.net-core blazor

【解决方案1】：

我明白了 - 我能够使用 JSInterop 获取光标位置 $('#CSTemplate').prop("selectionStart") 并将值保存在变量中。然后稍后在 AddVariable 函数中使用此值。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以在InputHandler 中设置您的条件，当您检查@ 以查看它是否已输入时，您还可以获取长度以查看它是否只是一个@ 或者它显然在它之前或之后有一些字符长度为1，值为@，这意味着只有一个@，如果长度大于1，那么......

【讨论】：

这不起作用，因为输入中可以有多个@。我不知道刚刚输入的是哪一个...