Posted By

miha on 03/17/15

Tagged

Versions (?)

Last Edited at 03/17/15 02:39am

Statistics

Viewed 483 times

Favorited by 0 user(s)

Related snippets

Phone number input autoformat

/ Published in: JavaScript

Phone number input autoformat

Highlighted TextExpand

// EXAMPLE:
// https://jsfiddle.net/vvvvvv/xxo6x8wu/

var phone = {};

// http://country.io/phone.json
phone.codes = {"BD": "880", "BE": "32", "BF": "226", "BG": "359", "BA": "387", "WF": "681", "BL": "590", "BN": "673", "BO": "591", "BH": "973", "BI": "257", "BJ": "229", "BT": "975", "BV": "", "BW": "267", "WS": "685", "BQ": "599", "BR": "55", "BY": "375", "BZ": "501", "RU": "7", "RW": "250", "RS": "381", "TL": "670", "RE": "262", "TM": "993", "TJ": "992", "RO": "40", "TK": "690", "GW": "245", "GT": "502", "GS": "", "GR": "30", "GQ": "240", "GP": "590", "JP": "81", "GY": "592", "GF": "594", "GE": "995", "GB": "44", "GA": "241", "SV": "503", "GN": "224", "GM": "220", "GL": "299", "GI": "350", "GH": "233", "OM": "968", "TN": "216", "JO": "962", "HR": "385", "HT": "509", "HU": "36", "HK": "852", "HN": "504", "HM": " ", "VE": "58", "PS": "970", "PW": "680", "PT": "351", "SJ": "47", "PY": "595", "IQ": "964", "PA": "507", "PF": "689", "PG": "675", "PE": "51", "PK": "92", "PH": "63", "PN": "870", "PL": "48", "PM": "508", "ZM": "260", "EH": "212", "EE": "372", "EG": "20", "ZA": "27", "EC": "593", "IT": "39", "VN": "84", "SB": "677", "ET": "251", "SO": "252", "ZW": "263", "SA": "966", "ES": "34", "ER": "291", "ME": "382", "MD": "373", "MG": "261", "MF": "590", "MA": "212", "MC": "377", "UZ": "998", "MM": "95", "ML": "223", "MO": "853", "MN": "976", "MH": "692", "MK": "389", "MU": "230", "MT": "356", "MW": "265", "MV": "960", "MQ": "596", "MR": "222", "UG": "256", "TZ": "255", "MY": "60", "MX": "52", "IL": "972", "FR": "33", "IO": "246", "SH": "290", "FI": "358", "FJ": "679", "FK": "500", "FM": "691", "FO": "298", "NI": "505", "NL": "31", "NO": "47", "NA": "264", "VU": "678", "NC": "687", "NE": "227", "NF": "672", "NG": "234", "NZ": "64", "NP": "977", "NR": "674", "NU": "683", "CK": "682", "XK": "", "CI": "225", "CH": "41", "CO": "57", "CN": "86", "CM": "237", "CL": "56", "CC": "61", "CA": "1", "CG": "242", "CF": "236", "CD": "243", "CZ": "420", "CY": "357", "CX": "61", "CR": "506", "CW": "599", "CV": "238", "CU": "53", "SZ": "268", "SY": "963", "SX": "599", "KG": "996", "KE": "254", "SS": "211", "SR": "597", "KI": "686", "KH": "855", "KM": "269", "ST": "239", "SK": "421", "KR": "82", "SI": "386", "KP": "850", "KW": "965", "SN": "221", "SM": "378", "SL": "232", "SC": "248", "KZ": "7", "SG": "65", "SE": "46", "SD": "249", "DJ": "253", "DK": "45", "DE": "49", "YE": "967", "DZ": "213", "US": "1", "UY": "598", "YT": "262", "UM": "1", "LB": "961", "LA": "856", "TV": "688", "TW": "886", "TR": "90", "LK": "94", "LI": "423", "LV": "371", "TO": "676", "LT": "370", "LU": "352", "LR": "231", "LS": "266", "TH": "66", "TF": "", "TG": "228", "TD": "235", "LY": "218", "VA": "379", "AE": "971", "AD": "376", "AF": "93", "IS": "354", "IR": "98", "AM": "374", "AL": "355", "AO": "244", "AQ": "", "AR": "54", "AU": "61", "AT": "43", "AW": "297", "IN": "91", "AZ": "994", "IE": "353", "ID": "62", "UA": "380", "QA": "974", "MZ": "258"};

// default country code instead of 8
phone.codes_default = '7';

// list of inputs
phone.input = document.querySelectorAll('#phone1, #phone2');

phone.only_numbers = function(p) {
  return p.replace(new RegExp('[^0-9]','g'),'');
};

phone.format = function(input) {
  var p = phone.only_numbers(input.value);
  if(p && p.length > 0) {
    var formatted = '+';
    var code = '';
    for(i in this.codes) {
      if(this.codes[i] === p.substring(0,1) || (p.length > 1 && this.codes[i] === p.substring(0,2)) || (p.length > 2 && this.codes[i] === p.substring(0,3))) {
        code = this.codes[i];
      }
    }
    if(p.length > 2) {
      if(!code) {
        code = this.codes_default;
      }
      formatted += code;
      if(p.length > (code.length+2)) {
        formatted += ' '+p.substring(code.length,(code.length+3));
        if(p.length > (code.length+5)) {
          formatted += ' '+p.substring((code.length+3),(code.length+6));
          if(p.length > (code.length+7)) {
            formatted += '-'+p.substring((code.length+6),(code.length+8));
            if(p.length > (code.length+9)) {
              if(p.length === (code.length+10)) {
                formatted += '-'+p.substring((code.length+8),(code.length+10));
              } else {
                formatted += p.substring((code.length+8),(code.length+9));
                if(p.length > (code.length+10) && p.length <= (code.length+12)) {
                  formatted += '-'+p.substring((code.length+9),p.length);
                } else {
                  if(p.length > (code.length+12)) {
                    formatted += '-'+p.substring((code.length+9),(code.length+12))+'-'+p.substring((code.length+12),p.length);
                  }
                }
              }
            }
            if(p.length === (code.length+9)) {
              formatted += '-'+p.substring((code.length+8),(code.length+9));
            }
          } else {
            if(p.length === (code.length+7)) {
              formatted += '-'+(p.substring((code.length+6),(code.length+7)));
            } else {
              formatted += (p.substring((code.length+6),p.length));
            }
          }
        } else {
          if(p.length === (code.length+4) || p.length === (code.length+5)) {
            formatted += '-'+(p.substring((code.length+3),p.length));
          } else {
            formatted += (p.substring((code.length+3),p.length));
          }
        }
      } else {
        formatted += ' '+(p.substring(code.length,p.length));
      }
      input.value = formatted;
    }
  }
};

for(var i = 0; i < phone.input.length; i++) {
  phone.input[i].onkeydown = function(e) {
    var key = e.charCode || e.keyCode || 0;
    if(((key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105)) && !e.shiftKey) || (key == 65 && e.ctrlKey)) {
      if((key >= 48 && key <= 57) || (key >= 96 && key <= 105)) {
        phone.format(this);
      }
    } else {
      return false;
    }
  };
  phone.input[i].onkeyup = function() {
    if(phone.only_numbers(this.value).length > 15) {
      this.value = this.value.substring(0,(this.value.length-1));
    }
  };
  phone.input[i].onblur = function() {
    phone.format(this);
  };
  phone.input[i].onclick = function() {
    phone.format(this);
  };
}

URL: https://jsfiddle.net/vvvvvv/xxo6x8wu/

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.

Posted By

Tagged

Versions (?)

Statistics

Related snippets

Phone number input autoformat

Comments

Choose a language for easy browsing: