MaskedTextBox - Documentation |


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.


  • CSS files
    • smart.default.css - the CSS file containing the styles for the element.
  • Javascript module
    • smart.textbox.js - the JS module which is in the source/modules/ folder and loads all script dependencies.
  • Javascript files
    • 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


    • Import a module

      With this approach, we import a module and create the web component by using the Smart function. The #textbox is a smart-masked-text-box tag.

      import {smartMaskedTextBox} from "../../source/modules/smart.textbox.js";
      Smart('#textbox', class {
      get properties() {
      	return {
      		selectAllOnFocus: true
      document.readyState === 'complete' ? init() : window.onload = init;
      function init() { 
      Using the Smart function is optional. You can use const textbox = document.querySelector("#textbox"); and set the properties like that:
      const textbox = document.querySelector("#textbox");
      textbox.selectAllOnFocus = true;

    • Import a module, Init on Demand

      The following imports the web component's module and creates it on demand, when the document is ready. The #textbox is a DIV tag.

      import {smartMaskedTextBox} from "../../source/modules/smart.textbox.js";
      document.readyState === 'complete' ? init() : window.onload = init;
      function init() { 
      const textBox = new smartMaskedTextBox('#textbox', {
         selectAllOnFocus: true
    • Load scripts

      The following code adds the custom element to the page.

      <!DOCTYPE html>
      <html lang="en">
       <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
       <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>

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


    Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event

    Create a new element:
    const textbox = document.createElement('smart-masked-text-box');

    Append it to the DOM:

    Remove it from the DOM:

    Set a property:
    textbox.propertyName = propertyValue;

    Get a property value:
    const propertyValue = textbox.propertyName;

    Invoke a method:
    textbox.methodName(argument1, argument2);

    Add Event Listener:
    const eventHandler = (event) => {
    // your code here.
    textbox.addEventListener(eventName, eventHandler);

    Remove Event Listener:
    textbox.removeEventListener(eventName, eventHandler, true);


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 focused

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