Как запретить пользователям очищать поле ввода цифр? - PullRequest
1 голос
/ 03 августа 2020

Следующий маршрутизируемый компонент не позволяет пользователям опустошать поле ввода. Это то, что я хочу.

@page "/"
@using System.Text.RegularExpressions

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

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

По некоторым причинам мне нужно привязать, но без @bind и @bind:event следующим образом.

@page "/"
@using System.Text.RegularExpressions

<p>Counter: @counter</p>
<input 
       type="number"
       value="@counter"
       @oninput="OnInput"
       @onkeypress="OnKeyPress"
       @onkeypress:preventDefault="true" />

@code {

    private int counter;
    private void OnInput(ChangeEventArgs e)
    {
        if(e.Value.ToString() == string.Empty)
        {
            e.Value = "0";
            counter = int.Parse(e.Value.ToString());
        }
    }
    private void OnKeyPress(KeyboardEventArgs e)
    {
        if (e.Key == "+")
            counter++;
        else if (e.Key == "-")
            counter--;

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

Однако пользователи больше не запрещено очищать поле ввода.

Вопрос

Как запретить пользователям очищать поле ввода, но без использования @bind и @bind:event?

1 Ответ

1 голос
/ 04 августа 2020

Это намного лучше, чем другой ответ, включая использование клавиш «минус» и «плюс»:

@page "/"
@using System.Text.RegularExpressions

<input type="number"
       value="@counter"
       @oninput="EventCallback.Factory.CreateBinder<int>(this, __value => counter = __value, counter)"
       @onkeydown="OnKeyDown"
       @onkeypress="OnKeyPress"
       @onkeypress:preventDefault="true" />
   
@code {

    private int counter;


    private void OnKeyDown(KeyboardEventArgs e)
    {

        if (e.Key == "Backspace" && (counter.ToString().Length == 1))
        {
            counter = 1;
            return;
        }
               

    }
    private void OnKeyPress(KeyboardEventArgs e)
    {


        if (e.Key == "+")
            counter++;
        else if (e.Key == "-")
            counter--;



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


    }

}

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

@page "/"
@using System.Text.RegularExpressions

<input type="number"
       value="@counter"
       @oninput="OnInput"
       @onkeydown="OnKeyDown"
       @onkeypress="OnKeyPress"
       @onkeypress:preventDefault="true" />
<input type="number" />

@code {
    private string counter = "0";
    private void OnInput(ChangeEventArgs args)
    {
        if (args.Value.ToString() == "")
        {
            counter = "0";
        }
        else
        {
            counter = args.Value.ToString();

        }
    }
    private void OnKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Backspace" && counter.Length == 1)
        {
            // Note that I'm using here space, but you may use any
            // character and string as long as it is not "0".
            counter = " ";
        }

    }
    private void OnKeyPress(KeyboardEventArgs e)
    {

        if (e.Key == "+")
        {
            var num = int.Parse(counter.ToString());
            num++;
            counter = num.ToString();
        }
        else if (e.Key == "-")
        {
            var num = int.Parse(counter.ToString());
            num--;
            counter = num.ToString();
        }

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

    }

}
...