开拓者输入口罩 [英] Blazor input mask

问题描述

我想知道是否可以通过继承InputBase并最好使用Regex来使用Blazor进行屏蔽输入?如果仅使用C#无法实现，那么JavaScript就可以了.我知道Syncfusion具有付费功能，但是我更喜欢免费的东西.任何GitHub存储库或指南/提示都很好！

I’d like to know if it’s possible to make a masked input with Blazor by inheriting InputBase, and preferably using Regex? If not possible with C# only then JavaScript is fine. I know Syncfusion has a paid component, but I’d prefer free stuff. Any GitHub repo or guidance/hint is just fine!

推荐答案

我最终使用了以下代码(基于Ali Borjian的建议)，并通过继承InputBase制成了一个组件:

I ended up (baesed on Ali Borjian's advice) using the following code, I made a component by inheriting from 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
        });
    };

还有我们的课程(带有数据注释正则表达式):

And our class (with a Data Annotations 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; }

    }

这篇关于开拓者输入口罩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！