Как заставить @bind: event = "oninput" работать вместе с @onkeypress: preventDefault? - PullRequest
1 голос
/ 03 августа 2020

Я хочу, чтобы мои пользователи

  • вводили цифровые символы в поле ввода
  • или нажимали +/-.

Следующие это моя попытка. К сожалению, пользователи могут нажимать только +/- (а также стрелки вверх / вниз), ввод цифр невозможен.

Как решить эту проблему?

<p>Counter: @counter</p>


<input type="number" 
       @bind="counter"  
       @bind:event="oninput"
       @onkeypress="OnKeyPress"
       @onkeypress:preventDefault="true"
       />
@code {
    private int counter;
    private void OnKeyPress(KeyboardEventArgs e)
    {
        if (e.Key == "+")
            counter++;
        else if (e.Key == "-")
            counter--;
    }
}

Edit

Еще одна попытка, которая тоже не работает.

<p>Counter: @counter</p>


<input type="number" 
       value="@counter"  
       @oninput="@(e=>counter=int.Parse(e.Value.ToString()))"
       @onkeypress="OnKeyPress"
       @onkeypress:preventDefault="true"
       />
@code {
    private int counter;
    private void OnKeyPress(KeyboardEventArgs e)
    {
        if (e.Key == "+")
            counter++;
        else if (e.Key == "-")
            counter--;
    }
}

1 Ответ

1 голос
/ 03 августа 2020
@page "/"
@using System.Text.RegularExpressions

    <input type="number"
           @bind="counter"
           @bind:event="oninput"
           @onkeypress="OnKeyPress"
           @onkeypress:preventDefault="true" />
    @code {
        private int counter;
        private void OnKeyPress(KeyboardEventArgs e)
        {
            if (e.Key == "+")
                counter++;
            else if (e.Key == "-")
                counter--;

            if (Regex.IsMatch(e.Key, "[0-9]"))
            {
                counter = int.Parse( e.Key );
            }
        }
    }
...