对 Blazor 输入的PreventDefault答案

【问题标题】：PreventDefault on Blazor input对 Blazor 输入的PreventDefault
【发布时间】：2019-03-24 20:17:53
【问题描述】：

我有一个简单的应用程序，其输入字段应在您键入时插入一段预定义的文本。

我的代码如下所示：

<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。

【问题讨论】：

目前不支持不下拉到JS：github.com/aspnet/AspNetCore/issues/5545
@KirkWoll，这种特殊行为可能可以通过onkeydown、onkeyup 和value 的组合来完成。如果您愿意看一下我的答案，也许您可以在某些情况下对其进行改进或使其无效。谢谢。

标签： preventdefault blazor

【解决方案1】：

您可以在 Blazor 中进行一些不同的思考。

您可以设置“值”并处理“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);
    }
}

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

【讨论】：

【解决方案2】：

好的，这有点棘手：删除最后一个字符以覆盖用户输入键：

<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.

【讨论】：

感谢您的努力。但是，不幸的是，这是不可行的。为此，我必须回退到 Javascript。或者等到他们将此功能添加到 Blazor。
没关系，零努力，因为您设置了一个友好的测试环境。考虑发布您自己的解决方案以供将来参考。

【解决方案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

【讨论】：