Smart.MaskedTextBox element represents an input element that uses a mask to distinguish between proper and improper user input. smart-masked-text-box inherits smart-text-box.

To initialize a masked text box element the user has to include the following files to the head of the page:

  • smart.base.css - the CSS file containing the styles for element
  • smart.element.js - the base class
  • smart.button.js - the JS file containing the definition for the buttons inside the Scroll Bars. Required for smart-text-box.
  • smart.scrollbar.js - the JS file containing the definition for the ScrollBars of the listBox popup. Required for smart-text-box.
  • smart.listbox.js - the JS file containing the definition for the listBox in the drop down list popup. Required for smart-text-box.
  • smart.dropdownlist.js - the JS file containing the definition for drop down list popup. Required for smart-text-box.
  • smart.textbox.js - the JS file containing the base class about all text box elements
  • smart.maskedtextbox.js - the JS file containing the element definition

The following code adds a masked text box to the page. The default setting af mask property is "#####"

<!DOCTYPE html>
<html lang="en">
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.scrollbar.js"></script> <script type="text/javascript" src="../../source/smart.listbox.js"></script> <script type="text/javascript" src="../../source/smart.dropdownlist.js"></script> <script type="text/javascript" src="../../source/smart.textbox.js"></script> <script type="text/javascript" src="../../source/smart.maskedtextbox.js"></script> </head> <body> <smart-masked-text-box></smart-masked-text-box> </body> </html>


Note how smart.element.js and webcomponents.min.js are declared before everything else. This is mandatory for all custom elements.


Smart.MaskedTextBox uses promptChar property to point the available user input positions. These position are defined by the mask property.

Mask characters are:

  • 0 - Accepts any single digit between 0 and 9.
  • 9 - Accepts digit or space.
  • # - Digit or space, optional. If this position is blank in the mask, it will be rendered as a space
  • L - Letter, required.
  • ? - Letter, optional
  • & - Character, required
  • C - Character, optional
  • A - Alphanumeric, required
  • a - Alphanumeric, optional
 <smart-masked-text-box mask="(###)###-####" prompt-char="*"></smart-masked-text-box>


The Masked Text Box could be filled on initialization via the value property

 <smart-masked-text-box value="123"></smart-masked-text-box>


hidePromptOnLeave property is responsible all promt characters to be hidden when the element loses it's focus. If the element is focussed, characters are rendered again in the input-s field. By default prompt characters are rendered

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



If selectAllOnFocus is true the whole test is selected when the element is focussed

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


smartMaskedTextBox offers few different types of value formatiing. The property responsible to this is textMaskFormat. It can be:

  • excludePromptAndLiterals - all prompt characters and literals are removed from the value
  • includePrompt - all literals characters are removed from the value
  • includeLiterals - all prompt characters are removed from the value
  • includePromptAndLiterals - the value is equal to the visualized input string.
<smart-masked-text-box text-mask-format="excludePromptAndLiterals"></smart-masked-text-box>


Similar to textMaskFormat is smartMaskedTextBox's cutCopyMaskFormat property. It's used to set the value in the clipboard after "cut" and "copy" operations.

 <smart-masked-text-box cut-copy-mask-format="excludePromptAndLiterals"></smart-masked-text-box>



Smart.MaskedTextBox uses the following CSS variables for styling:

  • --smart-text-box-default-width: used to set the width of the element. Default value is 200px.
  • --smart-text-box-default-height: used to set the height of the element. Default value is 30px.