Advanced Search

Posted By

miha on 03/17/15

Tagged

Versions (?)

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

Statistics

Viewed 605 times
Favorited by 0 user(s)

Related snippets

2282
Strip phone number of all non alpha-numeric characters
819
Valid phone number
689
US Phone Number for W3C Schema (including toll free)
830
Phone Number Beautifier

Phone number input autoformat

/ Published in: JavaScript
Save to your folder(s)
Phone number input autoformat

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. // EXAMPLE:
  2. // https://jsfiddle.net/vvvvvv/xxo6x8wu/
  3.  
  4. var phone = {};
  5.  
  6. // http://country.io/phone.json
  7. 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"};
  8.  
  9. // default country code instead of 8
  10. phone.codes_default = '7';
  11.  
  12. // list of inputs
  13. phone.input = document.querySelectorAll('#phone1, #phone2');
  14.  
  15. phone.only_numbers = function(p) {
  16.   return p.replace(new RegExp('[^0-9]','g'),'');
  17. };
  18.  
  19. phone.format = function(input) {
  20.   var p = phone.only_numbers(input.value);
  21.   if(p && p.length > 0) {
  22.     var formatted = '+';
  23.     var code = '';
  24.     for(i in this.codes) {
  25.       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))) {
  26.         code = this.codes[i];
  27.       }
  28.     }
  29.     if(p.length > 2) {
  30.       if(!code) {
  31.         code = this.codes_default;
  32.       }
  33.       formatted += code;
  34.       if(p.length > (code.length+2)) {
  35.         formatted += ' '+p.substring(code.length,(code.length+3));
  36.         if(p.length > (code.length+5)) {
  37.           formatted += ' '+p.substring((code.length+3),(code.length+6));
  38.           if(p.length > (code.length+7)) {
  39.             formatted += '-'+p.substring((code.length+6),(code.length+8));
  40.             if(p.length > (code.length+9)) {
  41.               if(p.length === (code.length+10)) {
  42.                 formatted += '-'+p.substring((code.length+8),(code.length+10));
  43.               } else {
  44.                 formatted += p.substring((code.length+8),(code.length+9));
  45.                 if(p.length > (code.length+10) && p.length <= (code.length+12)) {
  46.                   formatted += '-'+p.substring((code.length+9),p.length);
  47.                 } else {
  48.                   if(p.length > (code.length+12)) {
  49.                     formatted += '-'+p.substring((code.length+9),(code.length+12))+'-'+p.substring((code.length+12),p.length);
  50.                   }
  51.                 }
  52.               }
  53.             }
  54.             if(p.length === (code.length+9)) {
  55.               formatted += '-'+p.substring((code.length+8),(code.length+9));
  56.             }
  57.           } else {
  58.             if(p.length === (code.length+7)) {
  59.               formatted += '-'+(p.substring((code.length+6),(code.length+7)));
  60.             } else {
  61.               formatted += (p.substring((code.length+6),p.length));
  62.             }
  63.           }
  64.         } else {
  65.           if(p.length === (code.length+4) || p.length === (code.length+5)) {
  66.             formatted += '-'+(p.substring((code.length+3),p.length));
  67.           } else {
  68.             formatted += (p.substring((code.length+3),p.length));
  69.           }
  70.         }
  71.       } else {
  72.         formatted += ' '+(p.substring(code.length,p.length));
  73.       }
  74.       input.value = formatted;
  75.     }
  76.   }
  77. };
  78.  
  79. for(var i = 0; i < phone.input.length; i++) {
  80.   phone.input[i].onkeydown = function(e) {
  81.     var key = e.charCode || e.keyCode || 0;
  82.     if(((key == 8 || key == 9 || key == 46 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105)) && !e.shiftKey) || (key == 65 && e.ctrlKey)) {
  83.       if((key >= 48 && key <= 57) || (key >= 96 && key <= 105)) {
  84.         phone.format(this);
  85.       }
  86.     } else {
  87.       return false;
  88.     }
  89.   };
  90.   phone.input[i].onkeyup = function() {
  91.     if(phone.only_numbers(this.value).length > 15) {
  92.       this.value = this.value.substring(0,(this.value.length-1));
  93.     }
  94.   };
  95.   phone.input[i].onblur = function() {
  96.     phone.format(this);
  97.   };
  98.   phone.input[i].onclick = function() {
  99.     phone.format(this);
  100.   };
  101. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.