Masking TextBox

In order to mask your TextBoxes, you can benefit from vanilla-masker, a pure javascript string masking tool. It can be easily added to your project as a node module. The main idea is to get the whole text inside onTextChanged event and reassign with the masked text.


Go here and follow the instructions to install the library with NPM.

  • Open Terminal in the workspace and run the following command

(cd scripts && npm i -S vanilla-masker)

Require the module

const VMasker = require('vanilla-masker/lib/vanilla-masker');


const extend = require("js-base/core/extend");
const Page = require("sf-core/ui/page");
const Color = require("sf-core/ui/color");
const TextBox = require("sf-core/ui/textbox");
const FlexLayout = require("sf-core/ui/flexlayout");
const VMasker = require('vanilla-masker/lib/vanilla-masker');
const Page1 = extend(Page)(
function(_super) {
var self = this;
this.onShow = function() {
this.headerBar.visible = false;
Application.statusBar.visible = false;
var maskedTextBox = new TextBox({
left:0, top:0,
height:75, width: 200,
positionType: FlexLayout.PositionType.ABSOLUTE,
backgroundColor: Color.create("#9bc1ff")
maskedTextBox.onTextChanged = function(e) {
var maskedText = VMasker.toPattern(maskedTextBox.text, "(99) 9999-9999");
maskedTextBox.text = maskedText;
module && (module.exports = Page1);