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.

Files

  • 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

    Usage

    • 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">
<head>
 <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>
</head>
<body>
  <smart-masked-text-box></smart-masked-text-box>
</body>
</html>

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

    Demo

    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: 
    document.body.appendChild(textbox);

    Remove it from the DOM: 
    textbox.parentNode.removeChild(textbox);

    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);

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 focused

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