Блог

У меня есть простое приложение с полем ввода, которое должно вставлять предопределенную часть текста при вводе.

Код, который у меня есть, выглядит следующим образом:

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

Здесь у меня есть онлайн-демонстрация.

Вы можете думать немного по-другому в 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);
    }
}
  

Я не могу представить, зачем вы хотели бы это сделать, и есть много дополнительных вещей, которые вам нужно сделать, чтобы покрыть пробелы, клавиши со стрелками, табуляцию и т.д…

Хорошо, это немного грязновато: удалите последний символ, чтобы переопределить пользовательский ключ ввода:

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

Протестируйте это в blazorfiddle.

Теперь (20.11.21) есть решение:

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

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