Blazor MaskedTextbox概述
的Blazor遮罩文本框组件提供掩码并提示用户以所需格式输入数据，并防止输入与掩码不匹配的数据。您可以使用它向用户显示编写诸如电话号码、信用卡号码、邮政编码、IP地址、百分比值等内容所需的格式。
控件的各种属性也可以添加自定义CSS类或控制输入元素，例如名字，占位符，tabindex,更多的，并对……作出回应事件．
MaskedTextBox组件是《Blazor》的teleerik UI，一个专业级的UI库，有100个本地组件，用于构建现代和功能丰富的应用程序。要想尝试一下，注册一个30天的免费试用。
创建MaskedTextBox
使用teleerik MaskedTextbox for Blazor:
- 添加
< TelerikMaskedTextBox >标签到你的剃刀页面。 - 设置它
价值到字符串你想摆脱它。 - 提供所需的
面具提示用户。
具有双向值绑定和信用卡掩码的基本遮罩文本框
@TheValue
@code{string TheValue {get;设置;}}在开始编写之前，从上面的代码片段得到的结果
Mask-Related参数
下表提供了掩码相关参数的快速概述。你可以看到遮罩和提示文章了解更多细节。
| 参数 | 类型和默认值 | 描述 |
|---|---|---|
IncludeLiterals |
保龄球 |
控件中是否包含掩码中的文字字符(那些不带有特殊含义的字符，如括号或破折号)价值． |
面具 |
字符串 |
定义用户必须遵循的掩码(模式)。 |
MaskOnFocus |
保龄球 |
控件是否仅在输入聚焦时才向用户显示掩码。当设置为真正的，用户将看到FloatingLabel(如果使用)或占位符(如果存在)，而不是掩码，以防文本框为空。当输入中有某个值时，将显示掩码和输入。 |
提示 |
字符＿ |
定义用户将在没有用户值的掩码中看到的提示字符。 |
PromptPlaceholder |
字符? |
定义添加到raw中的字符价值对于还没有用户输入的地方。 |
MaskedTextBox参数
| 参数 | 类型和默认值 | 描述 |
|---|---|---|
类 |
字符串 |
控件中添加自定义CSS类< div class = " k-maskedtextbox”>元素。 |
宽度 |
字符串 |
控件的宽度<输入>元素。 |
DebounceDelay |
int（ 150） |
指定从最后键入符号到更新值之间的时间(以毫秒为单位)。 |
启用 |
保龄球（ 真正的） |
控制用户是否可以在组件中键入。 |
Id |
字符串 |
呈现为id属性上的<输入/ >元素，所以你可以附加a<标签= " " >输入 |
名字 |
字符串 |
呈现为名字属性。 |
占位符 |
字符串 |
呈现为占位符属性。 |
TabIndex |
int |
映射到tabindex属性。您可以使用它来自定义表单中的输入聚焦的顺序选项卡关键。 |
标题 |
字符串 |
映射到标题属性。你可以用它来加a工具提示． |
ValidateOn |
ValidationEvent枚举（ 输入） |
配置将触发验证的事件(如果启用了验证)。看到简单输入的验证模式文章获取更多信息。 |
价值 |
字符串 |
获取/设置输入的值，可用于绑定。 |
验证
的内容进行验证TelerikMaskedTextBox使用Data Annotation属性。有关如何验证MaskedTextBox内容的示例，请参阅输入验证文章
面具的例子
下面的示例演示了如何创建一些面具对于常用的输入类型:
电话-使用文字(括号和加号表示国家代码);破折号(为了可读性)和数字规则。
信用卡-对数字使用规则，对破折号使用文字。
SSN-和信用卡一样。
英国邮政编码—使用字母和数字的规则。
邮政编码-使用数字规则。
ZIP + 4的代码-数字规则之间的横线符号。
百分比-数字规则，从当前区域性获取的小数分隔符为文字，百分号为文字。该示例还展示了如何将其解析为
双价值。定制的面具-一个混合文字和规则的例子，要求发票号码有一定比例的符号，而不是由用户决定的。还展示了如何转义作为规则的字符，使它们表现得像字面量。
电话，信用卡，社会安全号码，英国邮政编码，邮政编码，邮政编码+4代码面具
在输入中键入@*以查看结果。根据你想要得到什么，你可能想要设置incleliterals =tru像百分比的例子在最后*@ @Phone @CardNumber @SSN @ZipCode @ZipPlus4Code
@bind-Value="@UkPostcode">
@code{string Phone {get;设置;} string CardNumber {get;设置;}字符串SSN {get;设置;} string 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之间的值//你可以实现任何首选的逻辑双精度?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