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 to: https://github.com/vanilla-masker/vanilla-masker and follow the instructions to install the library with NPM.

Cheat Sheet:

  • Open Terminal in the workspace
  • Go to workspace/scripts and Run the command below:
npm install vanilla-masker --save
  • Require the module as follows in the javascript file you want to use:
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