Build your web apps using Smart Custom Elements
Smart.MaskedTextBox - configuration and usage
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.
- smart.textbox.js - the JS module which is in the
- 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 useconst 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.