在 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

您可以在 Blazor 中以不同的方式思考。

您可以设置“值”并处理“oninput”事件，而不是使用“bind”并阻止击键，如下所示：

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

我无法想象你为什么要这样做，而且你需要做很多额外的事情来涵盖退格键、箭头键、制表符等......