Posted By


miha on 03/17/15

Tagged


Statistics


Viewed 473 times
Favorited by 0 user(s)

Phone number input autoformat


/ Published in: JavaScript
Save to your folder(s)

Phone number input autoformat


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.