Получить позицию каретки для ввода текста 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 - это то, как я добавляю выделенный текст обратно в область текста.

Однако есть одна небольшая проблема. Если я уже набрал определенный текст, а затем я go вернулся к любой предыдущей позиции и набрал «@», меню все равно всплывет без проблем, но когда пользователь выбирает текст и вставка, конечно, только добавляется к конец текста. У меня возникают проблемы при попытке получить точную позицию каретки, когда "@" был, поэтому я добавляю текст сразу после "@", а не в конец ввода.

Большое спасибо!

Answer 1

Я понял - мне удалось использовать JSInterop, чтобы получить позицию курсора $ ('# CSTemplate'). Prop ("selectionStart") и сохранить значение в переменной. Затем используйте это значение позже в функции AddVariable.

Answer 2

Я сделал быстрое демо-приложение, проверь его https://github.com/Lupusa87/BlazorDisplayMenuAtCaret

Answer 3

вы можете установить ваше условие в InputHandler, и когда вы проверяете @, чтобы увидеть, является ли он введенным, вы также можете получить длину, чтобы увидеть, что, если это просто @ или имеет несколько символов до или после него, очевидно, когда длина равна 1, а значение равно @, это означает, что есть просто @, а если длина больше единицы, то ...