Dynamic phone formatting JS class

[iCoder]

Hi everybody!

Just finished testing my new helpful JavaScript class - phoneFormatter.

It forces user enter valid phone in specified input field.

Class itself [phoneformatter.js]:

Code: Select all

   function phoneFormatter(params) {

      this.currPhone = '';
      this.placeHolder = '_';
      this.phoneTemplate = '(_ _ _) _ _ _ - _ _ _ _';
      this.maxLength = 0;
      this.digitPositions = [];
      this.inputSourceID = '';
      this.inputDestID = '';
      this.minTemplate = '200000000000000000000';
      this.maxTemplate = '999999999999999999999';
      this.prefixAdded = false;

      this.init = function(params) {
         if (params !== undefined) {
            if (params.placeHolder !== undefined) {
               this.setPlaceHolder(params.placeHolder);
            }

            if (params.phoneTemplate !== undefined) {
               this.setPhoneTemplate(params.phoneTemplate);
            }

            if (params.source !== undefined && params.dest !== undefined) {
               this.setSourceDest(params.source, params.dest)
            }
         }
      }

      this.setPhoneTemplate = function(tpl) {
         this.phoneTemplate = tpl;
         this.scanDigitPositions();
      };

      this.setPlaceHolder = function(pHolder) {
         this.placeHolder = pHolder;
         this.scanDigitPositions();
      };

      this.setSourceDest = function(src, dst) {
         this.inputSourceID = src;
         this.inputDestID = dst;
         this.currPhone = '';
         this.setInputValues();
      };

      this.scanDigitPositions = function() {
         this.digitPositions=new Array();
         for(i=0; i<this.phoneTemplate.length; i++) {
            if (this.phoneTemplate.charAt(i)==this.placeHolder) {
               this.digitPositions.push(i);
            }
         }
         this.maxLength = this.digitPositions.length;
      };
      
      this.mixPhone2Tpl = function() {
         var ret = this.phoneTemplate;
         if (this.digitPositions.length<1) this.scanDigitPositions();
         for(i=0; i<this.currPhone.length && i<this.maxLength; i++) {
            ret = ret.slice(0,this.digitPositions[i])+this.currPhone.charAt(i)+ret.slice(this.digitPositions[i]+1,ret.length)
         }
         return ret;
      };
      
      this.setInputValues = function() {
         document.getElementById(this.inputDestID).value = this.currPhone;
         document.getElementById(this.inputSourceID).value = this.mixPhone2Tpl();
      };
      
      this.digitInsert = function(c) {
         var ret = false;
         var d = String.fromCharCode(c);
         if (this.currPhone.length<this.maxLength && this.isDigit(c) && this.isDigitOk(d)) {
            this.currPhone = this.currPhone.concat(d);
            this.setInputValues();
            ret = true;
         }
         return ret;
      };
      
      this.digitCutLast = function() {
         var ret = false;
         if (this.currPhone.length>0) {
            this.currPhone = this.currPhone.substr(0,this.currPhone.length-1);
            this.setInputValues();
            ret = true;
         }
         return ret;
      };
      
      this.isDigitOk = function(d) {
         var l = this.currPhone.length;
         var ret = false;
         if (l<this.maxLength) {
            min = this.minTemplate.charAt(l);
            max = this.maxTemplate.charAt(l);
            ret = (d>=min && d<=max);
   //         alert(l+'] '+min+' '+d+' '+max)
         }
         return ret;
      };
      
      this.isDigit = function(c) {
         return c>=48 && c<=57;
      };

      this.handler = function(e) {
         var agent = navigator.userAgent.toLowerCase();
         var i;
         if (agent.indexOf("msie") > -1 && agent.indexOf("opera") == -1) {
            var keyCode = event.keyCode;
         } else {
            var keyCode = e.which;
         }
         if (keyCode>=96 && keyCode<=105) keyCode -= 48;

         if (keyCode == 49 && this.currPhone.length == 0) { //need to add place for +1 in the template.
            this.prefixAdded = true;
            this.phoneTemplate = '_ '+this.phoneTemplate;
            this.minTemplate = '1'+this.minTemplate;
            this.scanDigitPositions();
            if (!this.digitInsert(keyCode)) this.setInputValues();
         } else {
            if (this.isDigit(keyCode)) {      //Digit
               if (!this.digitInsert(keyCode)) this.setInputValues();
            }
         }
         if (keyCode === 8) {   //BackSpace
            if (!this.digitCutLast()) this.setInputValues();
         }
//         alert(keyCode+' '+String.fromCharCode(keyCode));
         return false;
      };


/* ---------------------------------------------------------------------------------------- */

      if (params !== undefined) {
         this.init(params);
      }

   };


Class implementation is as easy as:

Code: Select all

      <script type="text/JavaScript" src="phoneformatter.js"> </script>

      <input type="hidden" id="c_phone" name="c_phone">
      <input type="text" value="" onkeyup="return pFormatter.handler(event);" maxlength="21" name="phoneVisible" id="phoneVisible">

      <script type="text/JavaScript">

         var pFormatter = new phoneFormatter(
         {
            source: 'phoneVisible',
            dest: 'c_phone'
         });

      </script>


DEMO: http://e-xxi.net/files/phone.html.

Enjoy!