Блазор входная маска

Question

Я хотел бы знать, возможно ли сделать маскированный ввод с помощью Blazor, унаследовав InputBase и, предпочтительно, используя Regex? Если это невозможно только с C#, тогда JavaScript в порядке. Я знаю, что в Syncfusion есть платный компонент, но я бы предпочел бесплатные. Любое GitHub репо или руководство / подсказка просто отлично!

Answer 1

Я закончил (основываясь на совете Али Борджяна), используя следующий код, я сделал компонент, унаследованный от InputBase:

@inject IJSRuntime JSRuntime
@inherits InputBase<string>
<input id="@guid"  @attributes="AdditionalAttributes" class="@CssClass" value="@CurrentValue" @oninput="EventCallback.Factory.CreateBinder<string>(this, __value => CurrentValueAsString = __value, CurrentValueAsString)" /> 
@code {
    Guid guid { get; set; }
    protected override void OnInitialized()
    {
        guid = Guid.NewGuid();
    }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("mask",guid.ToString(), AdditionalAttributes["data-mask"].ToString());
        }
    }
    protected override bool TryParseValueFromString(string value, out string result, out string validationErrorMessage)
    {
        result = value;
        validationErrorMessage = null;
        return true;
    }
}

Использование:

<EditForm Model="user" OnValidSubmit="Submit">

        <div class="form-group">
            <label>First Name:</label>
            <InputText @bind-Value="user.Name" class="form-control" placeholder="First Name" />
        </div>

        <div class="form-group">
            <label>French Phone no:</label>
            <InputMask @bind-Value="user.Telephone" class="form-control" data-mask="00.00.00.00.00" placeholder="Phone No" />
        </div>
        <button type="submit" class="btn btn-primary">OK</button>
        <ValidationSummary />
        <DataAnnotationsValidator />
    </EditForm>

@code{

    private User user = new User();

    private void Submit()
    {
    }
}

И в JS:

window.mask = (id,mask) => {
        var customMask = IMask(
            document.getElementById(id), {
            mask: mask
        });
    };

И наш класс (с RegEx аннотаций данных):

   public class User
    {
        [Required]
        public string Name { get; set; }
        [Required]
        [RegularExpression(@"^[0][1-9]([.][0-9][0-9]){4}", ErrorMessage="Incorrect phone number !")]
        public string Telephone { get; set; }

    }

Answer 2

Вы можете использовать различные javascript плагины маски, но я предлагаю imask (https://github.com/uNmAnNeR/imaskjs)

Теперь в блазоре выполните следующие действия: 1: В _Host.cs html добавить ссылку на библиотеку imask

< script src="https://unpkg.com/imask">< /script >

2. Добавьте файл javascript для обработки масок и добавьте его ссылку на _Host.cs html

< script src="~/script/customMasks.js">< /script >

3: В customMasks. js вы можете использовать разные маски, например, маску для номера телефона:

    window.masks = () => {

    var phoneMask = IMask(
        document.getElementById('phone-mask'), {
        mask: '+{7}(000)000-00-00'
    });

    ... (other masks)

   };

4: Теперь вам нужно вызывать функцию window.masks на каждой странице, которую вы хотите замаскировать,

 protected override async Task OnAfterRenderAsync(bool firstRender)
 {
  if (firstRender)
   {
     await JSRuntime.InvokeVoidAsync("mask");
   }
}

5: все готово, теперь вы можете замаскировать свои данные так:

 <input type="text" id="phone-mask" />