对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

你可以在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);
    }
}

我无法想象你为什么要这样做，还有许多额外的东西需要做，以涵盖退格，箭头键，标签等...

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

Answer 3

以下是针对困惑的，解释数据绑定如何在Blazor中工作：

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

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

“当呈现组件时，input元素的值来自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.Empty：

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

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

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