PreventDefault on Blazor input

Question

I have a simple application with an input field that should insert a predefined piece of text as you type.

The code I have looks like this:

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

When the input field has focus, and I press a letter on my keyboard, then it should add the first letter from the string _petition to the input. When I press any letter on my keyboard, it should enter the second letter into the input field. And so on.

The problem I have is that it also adds the letter at the end of the input that I pressed on my keyboard. I want to prevent that from happening.

Is there a way to fix this using issue Blazor code only?

I have an online demo here.

Answer 1

You can think a little differently in Blazor.

Rather than using "bind" and preventing the keystroke, you can set the "value" and handle the "oninput" event, like this:

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

I can't imagine why you would want to do this, and there are many extra things you need to do to cover backspaces, arrow keys, tab etc...