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.

Installation

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

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

Example

JavaScript
JavaScript
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;
_super(self);
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;
}.bind(this);
this.layout.addChild(maskedTextBox);
}.bind(this);
}
);
module && (module.exports = Page1);