Blazor MaskedTextbox概述
的Blazor蒙面文本框组件提供一个掩码，并提示用户以所需的格式输入数据，并防止不匹配掩码的输入。您可以使用它向用户显示需要编写诸如电话号码、信用卡号、邮政编码、IP地址、百分比值等内容的格式。
还可以添加自定义CSS类或控件的各种属性输入元素，例如的名字，占位符，tabindex,更多的，也会回应事件．
MaskedTextBox组件是Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。
创建MaskedTextBox
为Blazor使用Telerik MaskedTextbox:
- 添加
< TelerikMaskedTextBox >标签到你的剃须刀页。 - 设置它
价值到字符串你想摆脱它。 - 提供所需的
面具提示用户。
带有双向值绑定和信用卡掩码的基本掩码文本框
@TheValue
@code{string TheValue {get;设置;}}在开始编写之前，上面代码片段的结果
Mask-Related参数
下表提供了掩码相关参数的快速概述。你可以看到蒙版和提示文章获取更多详细信息。
| 参数 | 类型及默认值 | 描述 |
|---|---|---|
IncludeLiterals |
保龄球 |
控件中是否包含掩码中的文字字符(那些不具有特殊含义的字符，如括号或破折号)价值． |
面具 |
字符串 |
定义用户必须遵循的掩码(模式)。 |
MaskOnFocus |
保龄球 |
控制是否仅在聚焦输入时才将掩码显示给用户。当设置为真正的时，用户将看到FloatingLabel(如果使用)或占位符(如果存在)而不是掩码，以防文本框是空的。当输入中有一些值时，将显示掩码和输入。 |
提示 |
字符＿ |
定义用户将在已经没有用户值的掩码中看到的提示字符。 |
PromptPlaceholder |
字符? |
定义添加到原始数据中的字符价值对于还没有用户输入的地方。 |
MaskedTextBox参数
| 参数 | 类型及默认值 | 描述 |
|---|---|---|
类 |
字符串 |
类中添加自定义CSS类< div class = " k-maskedtextbox”>元素。 |
宽度 |
字符串 |
控件的宽度<输入>元素。 |
DebounceDelay |
int（ 150） |
指定从最后输入符号到更新值之间的时间(以毫秒为单位)。 |
启用 |
保龄球（ 真正的） |
控制用户是否可以输入组件。 |
Id |
字符串 |
渲染为id属性上的<输入/ >元素，所以你可以附加一个<标签= " " >对于输入 |
的名字 |
字符串 |
渲染为的名字HTML元素的属性。 |
占位符 |
字符串 |
渲染为占位符HTML元素的属性。 |
TabIndex |
int |
映射到tabindexHTML元素的属性。控件聚焦表单中的输入的顺序可以使用它自定义选项卡关键。 |
标题 |
字符串 |
映射到标题HTML元素的属性。你可以用它来添加工具提示． |
ValidateOn |
ValidationEvent枚举（ 输入） |
配置将触发验证的事件(如果启用了验证)。看到简单输入的验证模式文章获取更多信息。 |
价值 |
字符串 |
获取/设置输入的值，可用于绑定。 |
验证
的内容进行验证TelerikMaskedTextBox使用数据注释属性。有关如何验证MaskedTextBox内容的示例，请参阅输入验证文章
面具的例子
下面的示例演示如何创建一些面具对于常用的输入类型:
电话-利用文字(方括号和加号代表国家代码;为了可读性，还有破折号)和数字规则。
信用卡-使用规则的数字和文字的破折号。
SSN-和信用卡一样。
英国邮政编码-使用字母和数字规则。
邮政编码-使用规则的数字。
ZIP + 4的代码-为数字规则之间的破折号的仪式。
百分比-使用来自当前区域性的小数分隔符文字和百分比符号文字的数字规则。该示例还展示了如何将其解析为
双价值。定制的面具-一个混合文字和规则的例子，要求发票号码有一定部分的符号，不是由用户决定的。还说明如何转义作为规则的字符，使它们像字面量一样。
电话，信用卡，SSN，英国邮政编码，邮政编码，邮政编码+4码掩码
在输入中输入@*查看结果。这取决于你想要得到什么，你可能想要设置incleliterals = truu，就像百分比的例子在最后*@ @电话@卡号@邮编@ZipCode @ZipPlus4Code
@code{string电话{get;设置;} string CardNumber {get;设置;} string SSN {get;设置;}字符串UkPostcode {get; set; } string ZipCode { get; set; } string ZipPlus4Code { get; set; } }获取百分比输入和值的一种方法
@*查看将字符串解析为所需数值的方法-您可以根据应用程序的需要自定义*@ @RawPercentage @ActualPercentage @code{string PercentageMask {get;设置;} = $"00{System.Globalization.CultureInfo.CurrentCulture.NumberFormat.NumberDecimalSeparator}00%";字符串RawPercentage {get;设置;}双吗?ActualPercentage => ParsePercentage();//注意:这将精确地解析值，并将导致数字可以在0到100之间//而不像.NET通常将百分比作为0到1之间的值//你可以实现任何首选的逻辑double?ParsePercentage() {if (string.IsNullOrEmpty(RawPercentage)){返回null; } string trimmedValue = RawPercentage?.Replace("%", "").Replace(" ", ""); double result; if(double.TryParse(trimmedValue, out result)) { return result; } return null; } }为用户预设文字的自定义掩码
@*这个例子要求发票编号以字母开头，第二个字符是字母或数字，然后是破折号，然后是数字“900”和另外四个数字。例如:a1 -900123 *@ @invoiceNumber