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 输入掩码的主要内容,如果未能解决你的问题,请参考以下文章