Smartface Developer Center

Smartface Developer Center

Welcome to the Smartface Developer Hub. You'll find comprehensive guides and documentation to help you start developing and managing native iOS and Android apps with Smartface Cloud.

Get Started    

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

Updated about a year ago

Masking TextBox

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.