MaskedTextBox JAVASCRIPT UI Component API

MaskedTextBox Javascript API

Class

MaskedTextBox

MaskedTextBox uses a mask to control the input of the user.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

"none" - animation is disabled
"simple" - ripple animation is disabled
"advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property.

 <smart-masked-text-box animation='none'></smart-masked-text-box>

Set the animation property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.animation = 'simple';

Get the animation property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let animation = maskedtextbox.animation;

allowPromptAsInputboolean

Determines whether promptChar can be entered as valid input by the user.

Default value

false

Example

Set the allowPromptAsInput property.

 <smart-masked-text-box allow-prompt-as-input></smart-masked-text-box>

Set the allowPromptAsInput property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.allowPromptAsInput = false;

Get the allowPromptAsInput property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let allowPromptAsInput = maskedtextbox.allowPromptAsInput;

asciiOnlyboolean

Determines whether the input accepts characters only from the ASCII character set.

Default value

false

Example

Set the asciiOnly property.

 <smart-masked-text-box ascii-only></smart-masked-text-box>

Set the asciiOnly property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.asciiOnly = false;

Get the asciiOnly property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let asciiOnly = maskedtextbox.asciiOnly;

autoFocusboolean

Specifies whether the input should be focused when the page is loaded.

Default value

false

Example

Set the autoFocus property.

 <smart-masked-text-box auto-focus></smart-masked-text-box>

Set the autoFocus property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.autoFocus = false;

Get the autoFocus property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let autoFocus = maskedtextbox.autoFocus;

autoShowMaskboolean

Determines whether the mask is shown/hidden on focus/blur even if placeholder is not set.

Default value

false

Example

Set the autoShowMask property.

 <smart-masked-text-box auto-show-mask></smart-masked-text-box>

Set the autoShowMask property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.autoShowMask = false;

Get the autoShowMask property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let autoShowMask = maskedtextbox.autoShowMask;

cutCopyMaskFormat"excludePromptAndLiterals" | "includePrompt" | "includeLiterals" | "includePromptAndLiterals"

Determines whether literals and prompt characters are copied to the clipboard on cut/copy operations.

Allowed Values

"excludePromptAndLiterals" - Excludes the prompt and literal characters when copy/cut text from the input.
"includePrompt" - Includes the prompt character along with the rest of the input.
"includeLiterals" - Includes all literal characters from the input.
"includePromptAndLiterals" - Includes the prompt and literal characters from the input.

Default value

"excludePromptAndLiterals"

Try a demo showcasing the cutCopyMaskFormat property.

Example

Set the cutCopyMaskFormat property.

 <smart-masked-text-box cut-copy-mask-format='includePrompt'></smart-masked-text-box>

Set the cutCopyMaskFormat property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.cutCopyMaskFormat = 'includeLiterals';

Get the cutCopyMaskFormat property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let cutCopyMaskFormat = maskedtextbox.cutCopyMaskFormat;

disabledboolean

Enables or disables the element.

Default value

false

Example

Set the disabled property.

 <smart-masked-text-box disabled></smart-masked-text-box>

Set the disabled property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.disabled = false;

Get the disabled property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let disabled = maskedtextbox.disabled;

enterKeyBehavior"clearOnSubmit" | "submit"

Specifies the behavior on "Enter" key press. Default mode is "submit".

Allowed Values

"clearOnSubmit" - Clears the value of the input on Submit.
"submit" - Submits the value of the input but doesn't clear it.

Default value

"submit"

Example

Set the enterKeyBehavior property.

 <smart-masked-text-box enter-key-behavior='newLine'></smart-masked-text-box>

Set the enterKeyBehavior property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.enterKeyBehavior = 'submit';

Get the enterKeyBehavior property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let enterKeyBehavior = maskedtextbox.enterKeyBehavior;

hidePromptOnLeaveboolean

Determines whether the prompt character in the input mask is hidden when the masked text box isn't focused anymore.

Default value

false

Try a demo showcasing the hidePromptOnLeave property.

Example

Set the hidePromptOnLeave property.

 <smart-masked-text-box hide-prompt-on-leave></smart-masked-text-box>

Set the hidePromptOnLeave property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.hidePromptOnLeave = false;

Get the hidePromptOnLeave property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let hidePromptOnLeave = maskedtextbox.hidePromptOnLeave;

hintstring

Sets additional helper text below the element. The hint is visible only when the element is focused.

Default value

Try a demo showcasing the hint property.

Example

Set the hint property.

 <smart-masked-text-box hint='Helper text'></smart-masked-text-box>

Set the hint property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.hint = 'Hint';

Get the hint property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let hint = maskedtextbox.hint;

isOverwriteModeboolean

Determines whether new user input overwrites the existing input value or not.

Default value

false

Try a demo showcasing the isOverwriteMode property.

Example

Set the isOverwriteMode property.

 <smart-masked-text-box is-overwrite-mode></smart-masked-text-box>

Set the isOverwriteMode property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.isOverwriteMode = false;

Get the isOverwriteMode property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let isOverwriteMode = maskedtextbox.isOverwriteMode;

labelstring

Sets label above the element. The label is always visible.

Default value

Try a demo showcasing the label property.

Example

Set the label property.

 <smart-masked-text-box label='Helper text'></smart-masked-text-box>

Set the label property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.label = 'Hint';

Get the label property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let label = maskedtextbox.label;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property.

 <smart-masked-text-box locale='de'></smart-masked-text-box>

Set the locale property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.locale = 'fr';

Get the locale property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let locale = maskedtextbox.locale;

localizeFormatFunctionfunction | null

Callback used to customize the format of the messages that are returned from the Localization Module.

Example

Set the localizeFormatFunction property.

 <smart-masked-text-box localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-masked-text-box>

Set the localizeFormatFunction property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let localizeFormatFunction = maskedtextbox.localizeFormatFunction;

maskstring

Defines the mask for the input.

Default value

"#####"

Try a demo showcasing the mask property.

Example

Set the mask property.

 <smart-masked-text-box mask='##-###'></smart-masked-text-box>

Set the mask property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.mask = '(##)###';

Get the mask property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let mask = maskedtextbox.mask;

maskCompletedboolean

Indicates whether all required fields of the mask have been populated or not.

Default value

false

Example

Set the maskCompleted property.

 <smart-masked-text-box mask-completed></smart-masked-text-box>

Set the maskCompleted property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.maskCompleted = false;

Get the maskCompleted property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let maskCompleted = maskedtextbox.maskCompleted;

maskFullboolean

Indicates whether all required and optional fields of the mask have been populated or not.

Default value

false

Example

Set the maskFull property.

 <smart-masked-text-box mask-full></smart-masked-text-box>

Set the maskFull property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.maskFull = false;

Get the maskFull property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let maskFull = maskedtextbox.maskFull;

maxLengthnumber

Determines the maximum number of characters that the user can enter.

Default value

Try a demo showcasing the maxLength property.

Example

Set the maxLength property.

 <smart-masked-text-box max-length='120'></smart-masked-text-box>

Set the maxLength property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.maxLength = 150;

Get the maxLength property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let maxLength = maskedtextbox.maxLength;

messagesobject

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}}."

}

Example

Set the messages property.

 <smart-masked-text-box messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","invalidNode":"{{elementType}}: Ungultiger Parameter '{{node}}' beim Aufruf von {{method}}."}}'></smart-masked-text-box>

Set the messages property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.messages = {"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}}."}};

Get the messages property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let messages = maskedtextbox.messages;

namestring

Sets or gets the name attribute for the element. Name is used when submiting HTML forms.

Default value

Example

Set the name property.

 <smart-masked-text-box name='MaskedTextBox'></smart-masked-text-box>

Set the name property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.name = 'textbox';

Get the name property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let name = maskedtextbox.name;

placeholderstring

A string that appears inside the input when there's no value and mask.

Default value

Try a demo showcasing the placeholder property.

Example

Set the placeholder property.

 <smart-masked-text-box placeholder='(650)303-6565'></smart-masked-text-box>

Set the placeholder property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.placeholder = '4147-9687-1385-6921';

Get the placeholder property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let placeholder = maskedtextbox.placeholder;

promptCharstring

Determines the prompt char that is used for the mask of the element.

Default value

"_"

Try a demo showcasing the promptChar property.

Example

Set the promptChar property.

 <smart-masked-text-box prompt-char='*'></smart-masked-text-box>

Set the promptChar property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.promptChar = '-';

Get the promptChar property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let promptChar = maskedtextbox.promptChar;

readonlyboolean

If the element is readonly, the users cannot iteract with the element.

Default value

false

Example

Set the readonly property.

 <smart-masked-text-box readonly></smart-masked-text-box>

Set the readonly property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.readonly = true;

Get the readonly property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let readonly = maskedtextbox.readonly;

rejectInputOnFirstFailureboolean

Determines whether the parsing of user input should stop after the first invalid character or not.

Default value

false

Example

Set the rejectInputOnFirstFailure property.

 <smart-masked-text-box reject-input-on-first-failure></smart-masked-text-box>

Set the rejectInputOnFirstFailure property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.rejectInputOnFirstFailure = false;

Get the rejectInputOnFirstFailure property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let rejectInputOnFirstFailure = maskedtextbox.rejectInputOnFirstFailure;

requiredboolean

Specifies that the input must be filled in before submitting a form

Default value

false

Example

Set the required property.

 <smart-masked-text-box required></smart-masked-text-box>

Set the required property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.required = false;

Get the required property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let required = maskedtextbox.required;

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 value

false

Example

Set the resetOnPrompt property.

 <smart-masked-text-box reset-on-prompt></smart-masked-text-box>

Set the resetOnPrompt property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.resetOnPrompt = false;

Get the resetOnPrompt property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let resetOnPrompt = maskedtextbox.resetOnPrompt;

resetOnSpaceboolean

Determines whether hitting space character resets the currently selected value from the input or not.

Default value

false

Try a demo showcasing the resetOnSpace property.

Example

Set the resetOnSpace property.

 <smart-masked-text-box reset-on-space></smart-masked-text-box>

Set the resetOnSpace property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.resetOnSpace = false;

Get the resetOnSpace property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let resetOnSpace = maskedtextbox.resetOnSpace;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

 <smart-masked-text-box right-to-left></smart-masked-text-box>

Set the rightToLeft property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.rightToLeft = false;

Get the rightToLeft property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let rightToLeft = maskedtextbox.rightToLeft;

selectAllOnFocusboolean

Specifies whether the value of the input will be selected on focus or not.

Default value

false

Example

Set the selectAllOnFocus property.

 <smart-masked-text-box select-all-on-focus></smart-masked-text-box>

Set the selectAllOnFocus property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.selectAllOnFocus = false;

Get the selectAllOnFocus property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let selectAllOnFocus = maskedtextbox.selectAllOnFocus;

textMaskFormat"excludePromptAndLiterals" | "includePrompt" | "includeLiterals" | "includePromptAndLiterals"

Determines whether the value of the input should contain or not the prompt/literals of the mask.

Allowed Values

"excludePromptAndLiterals" - Excludes the prompt and literal characters from the mask.
"includePrompt" - Includes the prompt character from the mask along with the rest of the input.
"includeLiterals" - Includes all literal characters from the mask along with the input.
"includePromptAndLiterals" - Includes the prompt and literal characters from the mask along with the input.

Default value

"excludePromptAndLiterals"

Example

Set the textMaskFormat property.

 <smart-masked-text-box text-mask-format='includePrompt'></smart-masked-text-box>

Set the textMaskFormat property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.textMaskFormat = 'includeLiterals';

Get the textMaskFormat property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let textMaskFormat = maskedtextbox.textMaskFormat;

themestring

Determines the theme. Theme defines the look of the element

Default value

Example

Set the theme property.

 <smart-masked-text-box theme='blue'></smart-masked-text-box>

Set the theme property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.theme = 'red';

Get the theme property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let theme = maskedtextbox.theme;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property.

 <smart-masked-text-box unfocusable></smart-masked-text-box>

Set the unfocusable property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.unfocusable = false;

Get the unfocusable property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let unfocusable = maskedtextbox.unfocusable;

valuestring

Sets or gets the value of the element.

Default value

Example

Set the value property.

 <smart-masked-text-box value='Demo value.'></smart-masked-text-box>

Set the value property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.value = 'New demo value.';

Get the value property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let value = maskedtextbox.value;

validationfunction | null

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.

Try a demo showcasing the validation property.

Example

Set the validation property.

 <smart-masked-text-box validation='function(){ if(value.length === 5){ return true } return false }'></smart-masked-text-box>

Set the validation property by using the HTML Element's instance.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 maskedtextbox.validation = function(){ if(value.length < 10){ return true } return false };

Get the validation property.

 const maskedtextbox = document.querySelector('smart-masked-text-box');

 let validation = maskedtextbox.validation;

Events

changeCustomEvent

This event is triggered when the value of the Text Box is changed.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onChange

Arguments

evCustomEvent

ev.detailObject

ev.detail.oldValue - The previous value before it was changed.

ev.detail.value - The new value.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event.

const maskedtextbox = document.querySelector('smart-masked-text-box');
maskedtextbox.addEventListener('change', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

changingCustomEvent

This event is triggered on each key up event of the MaskedTextBox, if the value is changed.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onChanging

Arguments

evCustomEvent

ev.detailObject

ev.detail.oldValue - The previous value before it was changed.

ev.detail.value - The new value.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of changing event.

const maskedtextbox = document.querySelector('smart-masked-text-box');
maskedtextbox.addEventListener('changing', function (event) {
    const detail = event.detail,
        oldValue = detail.oldValue,
        value = detail.value;

	// event handling code goes here.
})

validationCustomEvent

This event is triggered if the validation property is set. Indicates whether valiation has passed successfully or not.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onValidation

Arguments

evCustomEvent

ev.detailObject

ev.detail.success - A flag inidicating whether the validation was successfull or not.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of validation event.

const maskedtextbox = document.querySelector('smart-masked-text-box');
maskedtextbox.addEventListener('validation', function (event) {
    const detail = event.detail,
        success = detail.success;

	// event handling code goes here.
})

Methods

focus(): void

Focuses the element.

Invoke the focus method.

const maskedtextbox = document.querySelector('smart-masked-text-box');
maskedtextbox.focus();

blur(): void

Blurs the element.

Invoke the blur method.

const maskedtextbox = document.querySelector('smart-masked-text-box');
maskedtextbox.blur();

CSS Variables

--smart-masked-text-box-default-widthvar()

Default value

"var(--smart-editor-width)"

smartMasked default width

--smart-masked-text-box-default-heightvar()

Default value

"var(--smart-editor-height)"

smartMasked default height