MaskedEdit是一个扩展控件,它可以让文本控件(如:TextBox)拥有屏蔽编辑功能。它的使用相当简单。
同时和它一起配合的使用的还有一个验证控件MaskedEditValidator
TextBox的例子
<asp:TextBox ID="TextBox2" runat="server" Width="130px" Height="16px" ValidationGroup="MKE" />
<ajaxToolkit:MaskedEditExtender ID="MaskedEditExtender2" runat="server"
TargetControlID="TextBox2"
Mask="9,999,999.99"
MessageValidatorTip="true"
OnFocusCssClass="MaskedEditFocus"
OnInvalidCssClass="MaskedEditError"
MaskType="Number"
InputDirection="RightToLeft"
AcceptNegative="Left"
DisplayMoney="Left"
ErrorTooltipEnabled="True" />
<ajaxToolkit:MaskedEditValidator ID="MaskedEditValidator2" runat="server"
ControlExtender="MaskedEditExtender2"
ControlToValidate="TextBox2"
IsValidEmpty="False"
MaximumValue="12000"
EmptyValueMessage="Number is required"
InvalidValueMessage="Number is invalid"
MaximumValueMessage="Number > 12000"
MinimumValueMessage="Number < -100"
MinimumValue="-100"
Display="Dynamic"
TooltipMessage="Input a number from -100 to 12000"
EmptyValueBlurredText="*"
InvalidValueBlurredMessage="*"
MaximumValueBlurredMessage="*"
MinimumValueBlurredText="*"
ValidationGroup="MKE" />
属性
|
说明
|
TargetControlID
|
拥有屏蔽编辑功能的文本控件ID
|
MaskType
|
屏蔽类型:
None – 无屏蔽
Number – 数字屏蔽 Date – 日期屏蔽 Time – 时间屏蔽 DateTime – 日期+时间屏蔽 |
Mask Characters and Delimiters
|
9 – 只允许数字
L – 只允许字母 $ – 只允许字母或者空格 C – 只允许自定义字符 A – 只允许字母或者自定义字符 N – 只允许数字或者自定义字符 ? – 任意字符 / – 日期分格符 : – 时间分格符 . – 数字分格符 , – 字符分格符 / – 特殊符(通c#用法) { – 开始符 } – 结束符 例子: 9999999 – 7个数字 99//99 – 四个数字,前两位数字和后两位数字中间有一个“/” |
AcceptAMPM
|
True or False.
True表示使用“上午(AM)下午(PM)”表示时间/
|
AutoComplete
|
True or False.
True 表示自动填充空白部分。
MaskType=Number – 填充0. MaskType=Time -填充当前时间. MaskType=Date -填充当前日期. MaskType=DateTime -填充当前日期+时间. |
AutoCompleteValue
|
当AutoComplete= True 时,自动填充的字符。
|
Century
|
四位数,当year是两位数的时候,世纪就有用了。
|
ClearMaskOnLostFocus
|
True or False.
True表示清空屏障当文本框失去焦点
|
ClearTextOnInvalid
|
True or False.
True表示当输入不正确的文本时候自动删除
|
ClipboardEnabled-
|
True or False.
True表示可以使用“拷贝/粘贴”
|
ClipboardText
|
True or False.
True表示可以使用“拷贝/粘贴”
|
DisplayMoney
|
Specifies how the currency symbol is displayed
None - Do not show the currency symbol Left - Show the currency symbol on the left of the mask Right - Show the currency symbol on the right of the mask |
ErrorTooltipCssClass
|
|
ErrorTooltipEnabled
|
|
Filtered
|
|
InputDirection
|
|
MessageValidatorTip
|
|
PromptChararacter
|
|
UserDateFormat
|
|
UserTimeFormat
|
|
OnFocusCssClass
|
|
OnFocusCssNegative
|
|
OnBlurCssNegative
|
|
OnInvalidCssClass
|
|
CultureName
|
|
CultureAMPMPlaceholder
|
|
CultureCurrencySymbolPlaceholder
|
|
CultureDateFormat
|
|
CultureDatePlaceholder
|
|
CultureDecimalPlaceholder
|
|
CultureThousandsPlaceholder
|
|
CultureTimePlaceholder
|
|
效果如下: