PreventDefault on 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 代码来解决此问题？

我有一个在线演示 here。

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

Test it at blazorfiddle.

Answer 2

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

您可以设置 "value" 并处理 "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);
    }
}

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

Answer 3

现在（11/2021）有解决办法：

<input value="@count" @onkeydown="KeyHandler" @onkeydown:preventDefault />

https://docs.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-6.0#prevent-default-actions

PreventDefault on Blazor 输入

PreventDefault on Blazor input

preventdefault

blazor