Blazor 输入掩码

Posted

技术标签:

【中文标题】Blazor 输入掩码【英文标题】:Blazor input mask 【发布时间】:2020-08-15 21:00:52 【问题描述】:

我想知道是否可以通过继承 InputBase 并最好使用 Regex 来使用 Blazor 进行屏蔽输入?如果仅使用 C# 不可能,那么 javascript 就可以了。我知道 Syncfusion 有一个付费组件,但我更喜欢免费的东西。任何 GitHub 存储库或指导/提示都可以!

【问题讨论】:

【参考方案1】:

我最终(根据 Ali Borjian 的建议)使用以下代码,通过继承 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
        );
    ;

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

   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; 

    

【讨论】:

谢谢@raphadesa! github.com/raphadesa/BlazorInputMask【参考方案2】:

您可以使用不同的 javascript 掩码插件,但我建议使用 imask (https://github.com/uNmAnNeR/imaskjs)

现在在 blazor 中按照以下步骤操作: 1:在_Host.cshtml中添加对imask库的引用

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

2:添加一个javascript文件来处理你的掩码,并将其引用添加到_Host.cshtml

< 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" />

【讨论】:

此解决方案在服务器端完美运行。只是一个代码观察,在组件上它应该说“掩码”而不是“掩码”。等待 JSRuntime.InvokeVoidAsync("masks");

以上是关于Blazor 输入掩码的主要内容,如果未能解决你的问题,请参考以下文章

如何在 blazor 中启用/禁用输入

Blazor - 组件包装和数据绑定

如何将 URL 输入参数值传递给 Blazor 页面?

使用 Blazor 将输入文本动态绑定到类/对象属性

抑制触发的 Blazor 输入事件

在 Blazor 上按输入键更改变量值