Как отменить значение нажатия клавиши onInput в блазоре - PullRequest
Новая
       82

Как отменить значение нажатия клавиши onInput в блазоре

1 голос
/ 21 апреля 2020

Я пытаюсь отформатировать телефонные номера в (###) - ### - #### формате, когда пользователь начинает печатать. Я не хочу принимать письма после достижения длины 14. Однако я не могу сделать это ограничение. Невозможно снова установить значение для элемента управления вводом. Я попытался использовать оба атрибута 'value' '@ bind-value'.

Буду признателен, если кто-нибудь поймет это ограничение простым способом. 

<input type="text" @bind-value="@PhoneNumber" @oninput="KeyInputHandler" />

@code {

    string phoneNo = string.Empty;

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

    private void KeyInputHandler(ChangeEventArgs e)
    {
        var key = (string)e.Value;
        if (PhoneNumber.Length < 14)
        {
            PhoneNumber = PhoneNumber.Length switch
            {
                0 => $"({key}",
                3 => $"{key})-",
                8 => $"{key}-",
                _ => $"{key}"
            };
        }
   }

1 Ответ

0 голосов
/ 23 апреля 2020

Я наконец создал пользовательский элемент управления, который форматирует число в формате (###) ### - ####. 

@using System.Text.RegularExpressions
@inherits InputText
<input @attributes="AdditionalAttributes" 
   class="@CssClass"
   value="@CurrentValue"
   @onkeypress="@OnKeyPressEventHandler"
   @onkeypress:preventDefault
   @onblur="OnBlurEventHandler"
   @oninput="EventCallback.Factory.CreateBinder<string>(this, __value => CurrentValueAsString = __value, CurrentValueAsString)" />

@code {

protected void OnBlurEventHandler(FocusEventArgs e)
{
    if (string.IsNullOrWhiteSpace(CurrentValueAsString))
    {
        return;
    }

    if (!Regex.IsMatch(CurrentValueAsString, @"^\(\d{3}\) \d{3}-\d{4}$"))
    {
        var number = Regex.Replace(CurrentValueAsString, @"[\s()-]", "");
        CurrentValueAsString = Regex.Replace(number, @"(\d{3})(\d{3})(\d{4})", "($1) $2-$3");
    }

    if (CurrentValueAsString.Length > 14)
    {
        CurrentValueAsString = CurrentValueAsString.Substring(0, 14);
    }
}

protected void OnKeyPressEventHandler(KeyboardEventArgs e)
{
    if (string.IsNullOrWhiteSpace(CurrentValueAsString))
    {
        CurrentValueAsString = string.Empty;
    }

    var key = (string)e.Key;
    if (CurrentValueAsString?.Length < 14 && Regex.IsMatch(key, "[0-9]"))
    {
        CurrentValueAsString += CurrentValueAsString.Length switch
        {
            0 => $"({key}",
            3 => $"{key}) ",
            4 => $") {key}",
            5 => $"-{key}",
            8 => $"{key}-",
            9 => $"-{key}",
            _ => $"{key}"
        };
    }
}

}

...