Blazor输入上的PreventDefault

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中您可能会有所不同。

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

以下内容使人迷惑不解，解释了数据绑定如何在Blazor中工作：

使用带有PetitionInput属性（<input bind="@PetitionInput" />）的绑定基本上等同于以下内容：

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

“呈现组件时，输入元素的值来自PetitionInput属性。当用户在文本框中键入内容时，将触发onchange事件，并将PetitionInput属性设置为更改后的值。原则上， bind将表达式的当前值与value属性相关联，并使用已注册的处理程序来处理更改。”

简单地说，当您使用bind属性（bind =“ @ PetitionInput”）时，Blazor会生成类似于以下代码：

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

这就是所谓的双向数据绑定。现在，如果您为onkeydown事件添加一个事件处理程序，则代码将执行其设计的工作：

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

首次显示页面时，由于PetitionInput的默认值设置为string，因此文本框为空。

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

当用户在文本框中输入字母'N'时，由于是双向绑定（使用bind属性），它会添加到PetitionInput属性中，并在文本框后立即显示在文本框中。托管组件已渲染。此外，PetitionHandleKeyDown方法中的代码将字母'T'添加到PetitionInput属性中（首次键入），因此，在呈现宿主组件之后，立即在文本框中显示字符串“ NT”。当然，要防止这种行为（我们必须尊重提问者的意愿）的方法是做什么事情
Magoo先生在上面做了。简单优雅，反映出对数据绑定以及Blazor如何工作的理解。

希望这会有所帮助...至少，我知道，它对我有所帮助。