Overview

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">
<head>
 <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>

Demo

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

Appearance

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>

Demo

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

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

Demo

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>

Demo

Behavior

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>

Demo

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>

Demo

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>

Demo

Styling

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.