PreventDefault на входе Blazor

Question

У меня есть простое приложение с полем ввода, которое должно вставить предопределенный фрагмент текста при вводе.

Код у меня выглядит так:

<input type="text" bind="@PetitionInput" onkeydown="@PetitionHandleKeyDown" />
@functions
{
    private int _petitionCharStep = 0;
    private string _petition = "This is a dummy text";
    public string PetitionInput { get; set; } = string.Empty;

    void PetitionHandleKeyDown(UIKeyboardEventArgs arg) {
        PetitionInput += _petition[_petitionCharStep];
        _petitionCharStep++;

        Console.WriteLine(PetitionInput);
    }
}

Когда поле ввода имеет фокус, и я нажимаю букву на клавиатуре, тогда оно должно добавить первую букву из строки _petition к вводу. Когда я нажимаю любую букву на клавиатуре, она должна ввести вторую букву в поле ввода. И так далее.

Проблема, с которой я столкнулся, заключается в том, что он также добавляет букву в конце ввода, который я нажал на клавиатуре. Я хочу предотвратить , чтобы это произошло.

Есть ли способ исправить это, используя только код проблемы Blazor?

У меня есть демоверсия здесь .

Answer 1

Хорошо, это немного грязно: удалите последний символ для переопределения клавиши ввода пользователя:

<input type="text" 
       value="@PetitionInput" 
       onkeydown="@PetitionHandleKeyDown"
       onkeyup="@PetitionHandleKeyUp" 
        />

// ...
private int _petitionCharStep = 0;
private string _petition = "This is a dummy text";
public string PetitionInput { get; set; } = string.Empty;

void PetitionHandleKeyDown(UIKeyboardEventArgs arg) {
    if (_petitionCharStep >= _petition.Length  )
    {
        PetitionInput = _petition.Substring(0, _petition.Length-1 );
        _petitionCharStep--;
    }
}

void PetitionHandleKeyUp(UIKeyboardEventArgs arg) {
    if (_petitionCharStep < _petition.Length  )
    {
        PetitionInput += _petition[_petitionCharStep];
        _petitionCharStep++;
    }        
}

Проверьте это на Blazorfiddle.

Answer 2

Вы можете думать немного по-другому в Blazor.

Вместо того, чтобы использовать «bind» и предотвращать нажатие клавиш, вы можете установить «value» и обработать событие «oninput», например:

https://blazorfiddle.com/s/azdn892n

@page "/"
<h1>Start typing something...</h1>
<input type="text" value="@PetitionInput" oninput="@PetitionHandleKeyDown" />

@functions {
    private int _petitionCharStep = 0;
    private string _petition = "This is a dummy text";
    public string PetitionInput { get; set; } = string.Empty;

    void PetitionHandleKeyDown(UIChangeEventArgs arg) {
        PetitionInput = _petition.Substring(0,++_petitionCharStep);
        Console.WriteLine(PetitionInput);
    }
}

Я не могу представить, почему вы хотели бы сделать это, и есть много дополнительных вещей, которые вам нужно сделать, чтобы закрыть пробелы, клавиши со стрелками, табуляции и т. Д ...

Answer 3

Следующее предназначено для сбитого с толку, объясняющего, как работает привязка данных в Blazor:

Использование связывания со свойством PetitionInput (<input bind="@PetitionInput" />) по существу эквивалентно следующему:

<input value="@PetitionInput" 
    onchange="@((UIChangeEventArgs __e) => PetitionInput= __e.Value)" />

"При визуализации компонента значение элемента input берется из свойства PetitionInput. Когда пользователь вводит текстовое поле, вызывается событие onchange, а свойству PetitionInput устанавливается измененное значение. В принципе, bindсвязывает текущее значение выражения с атрибутом значения и обрабатывает изменения, используя зарегистрированный обработчик. "

Проще говоря, когда вы используете атрибут bind (bind =" @ PetitionInput "), Blazor генерирует код, подобныйthis:

<input value="@PetitionInput" 
        onchange="@((UIChangeEventArgs __e) => PetitionInput= __e.Value)" />

Это так называемое двустороннее связывание данных.Теперь, если вы добавляете обработчик события для события onkeydown, код выполняет то, для чего он предназначен:

void PetitionHandleKeyDown(UIKeyboardEventArgs arg) {
    PetitionInput += _petition[_petitionCharStep];
    _petitionCharStep++;
}

Когда страница отображается впервые, текстовое поле по умолчанию пустоеЗначение PetitionInput установлено в string.Empty:

public string PetitionInput { get; set; } = string.Empty; 

Когда пользователь вводит текстовое поле, скажем, букву 'N', оно добавляется в свойство PetitionInput из-за двусторонней привязки(с использованием атрибута bind) и отображается в текстовом поле сразу после визуализации компонента размещения.Кроме того, код в методе PetitionHandleKeyDown добавляет букву «T» к свойству PetitionInput (при первом вводе), и, таким образом, строка «NT» отображается в текстовом поле сразу после визуализации компонента размещения.Конечно, способ предотвратить такое поведение (мы должны уважать желание спрашивающего) состоит в том, чтобы сделать то, что
Мистер Магу сделал выше.Простой и элегантный, отражающий понимание привязки данных и принципов работы Blazor.

Надеюсь, это поможет ... По крайней мере, я знаю, это помогло мне.