MaskedTextBox
MaskedTextBox uses a mask to control the input of the user.
Selector
smart-masked-text-box
Properties
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
allowPromptAsInputboolean
Determines whether promptChar can be entered as valid input by the user.
Default valuefalse
asciiOnlyboolean
Determines whether the input accepts characters only from the ASCII character set.
Default valuefalse
autoFocusboolean
Specifies whether the input should be focused when the page is loaded.
Default valuefalse
autoShowMaskboolean
Determines whether the mask is shown/hidden on focus/blur even if placeholder is not set.
Default valuefalse
cutCopyMaskFormatMaskedTextBoxCutCopyMaskFormat
Determines whether literals and prompt characters are copied to the clipboard on cut/copy operations.
Default valueexcludePromptAndLiterals
disabledboolean
Enables or disables the element.
Default valuefalse
enterKeyBehaviorEnterKeyBehavior
Specifies the behavior on "Enter" key press. Default mode is "submit".
Default valuesubmit
hidePromptOnLeaveboolean
Determines whether the prompt character in the input mask is hidden when the masked text box isn't focused anymore.
Default valuefalse
hintstring
Sets additional helper text below the element. The hint is visible only when the element is focused.
Default value"
isOverwriteModeboolean
Determines whether new user input overwrites the existing input value or not.
Default valuefalse
labelstring
Sets label above the element. The label is always visible.
Default value"
localestring
Sets or gets the language. Used in conjunction with the property messages.
Default value"en
localizeFormatFunctionany
Callback used to customize the format of the messages that are returned from the Localization Module.
maskstring
Defines the mask for the input.
Default value"#####
maskCompletedboolean
Indicates whether all required fields of the mask have been populated or not.
Default valuefalse
maskFullboolean
Indicates whether all required and optional fields of the mask have been populated or not.
Default valuefalse
maxLengthnumber
Determines the maximum number of characters that the user can enter.
Default value5
messagesany
Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
Default value
"en": {
"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",
"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",
"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",
"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
"moduleUndefined": "Module is undefined.",
"missingReference": "{{elementType}}: Missing reference to {{files}}.",
"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",
"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
"invalidNode": "{{elementType}}: Invalid parameter '{{node}}' when calling {{method}}."
}
namestring
Sets or gets the name attribute for the element. Name is used when submiting HTML forms.
Default value"
placeholderstring
A string that appears inside the input when there's no value and mask.
Default value"
promptCharstring
Determines the prompt char that is used for the mask of the element.
Default value"_
readonlyboolean
If the element is readonly, the users cannot iteract with the element.
Default valuefalse
rejectInputOnFirstFailureboolean
Determines whether the parsing of user input should stop after the first invalid character or not.
Default valuefalse
requiredboolean
Specifies that the input must be filled in before submitting a form
Default valuefalse
resetOnPromptboolean
Determines whether an input character that matches the prompt character should reset the current selected value in the input or not. Applicable only when allowPromptAsInput is enabled.
Default valuefalse
resetOnSpaceboolean
Determines whether hitting space character resets the currently selected value from the input or not.
Default valuefalse
rightToLeftboolean
Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
Default valuefalse
selectAllOnFocusboolean
Specifies whether the value of the input will be selected on focus or not.
Default valuefalse
textMaskFormatMaskedTextBoxTextMaskFormat
Determines whether the value of the input should contain or not the prompt/literals of the mask.
Default valueexcludePromptAndLiterals
themestring
Determines the theme. Theme defines the look of the element
Default value"
unfocusableboolean
If is set to true, the element cannot be focused.
Default valuefalse
valuestring
Sets or gets the value of the element.
Default value"
validationany
Callback function that allows to set custom validation on the value. If the function returns false then the value of the input is treated as not valid.
onchange((this: Window, ev: Event) => any) | null
This event is triggered when the value of the Text Box is changed.
Arguments
evEvent
ev.detailObject
ev.detail.oldValue - The previous value before it was changed.
ev.detail.newValue - The new value.
onvalidation((this: Window, ev: Event) => any) | null
This event is triggered if the validation property is set. Indicates whether valiation has passed successfully or not.
Arguments
evEvent
ev.detailObject
ev.detail.success - A flag inidicating whether the validation was successfull or not.
Methods
focus(): void
Focuses the element.
blur(): void
Blurs the element.