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.

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
const VMasker = require('vanilla-masker/lib/vanilla-masker');

Example

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

Masking TextBox