Saturday 19 April 2014

TextFileld Mask :

Ti.include("mask.js");

var win = Ti.UI.createWindow({
    top : "20",
    backgroundColor : "#a8a8a8"
});

var Postcode = Ti.UI.createTextField({
    hintText: "Postcode",
    left: 20,
    right: 20,
    top: 100,
    height : "40dp",
    borderColor : "black",
    paddingLeft : "5dp"
});
win.add(Postcode);

var Phone = Ti.UI.createTextField({
    hintText: "phone",
    left: 20,
    right: 20,
    top: 150,
    height : "40dp",
    borderColor : "black",
    paddingLeft : "5dp"
});
win.add(Phone);

var LimitCharacter = Ti.UI.createTextField({
    hintText: "Limit Character (5)",
    left: 20,
    right: 20,
    top: 200,
    height : "40dp",
    borderColor : "black",
    paddingLeft : "5dp"
});
win.add(LimitCharacter);

Phone.addEventListener("change", function(e) {
    Mask.mask(Phone, Mask.phone);
});

Postcode.addEventListener("change", function(e) {
    Mask.mask(Postcode, Mask.postcode);
});

LimitCharacter.addEventListener("change", function(e) {
    e.source.value = e.source.value.slice(0,5);
});

win.open();


mask.js

Mask = {
     mask : function(_field, _function) {
          _field.value = _function(_field.value);
      },

      postcode : function(v) {
            v = v.replace(/D/g, "");
            v = v.replace(/^(\d{5})(\d)/, "$1-$2");
            return v.slice(0, 9);
      },

      phone : function(v) {
            v = v.replace(/\D/g, "");
            v = v.replace(/^(\d\d)(\d)/g, "($1) $2");
            v = v.replace(/(\d{4})(\d)/, "$1-$2");
            return v.slice(0, 14);
      }
};


Output : 





No comments:

Post a Comment