Link to home
Start Free TrialLog in
Avatar of Jaber Ahmad
Jaber AhmadFlag for Côte d'Ivoire

asked on

Intl-tel-input and mask phone number

Good morning all !

I added the intl-tel-input module to my site and combined the formatting of the phone numbers when the user chose his country.
Good it works, if I choose Ivory Coast 07 12 34 56
But if I choose France: 06 12 34 56
however the number of France for example it is: 06 12 34 56 78
Here is all my code:
var input_1 = document.querySelector("#Fr_Telephone_1");
var intl_1 = window.intlTelInput(input_1,{
  initialCountry : "ci",
  preferredCountries : ['ci','sn','tg','cd','fr'],
  geoIpLookup : function(callback){
    $.get('https://ipinfo.io',function(){},"jsonp").always(function(resp){
      var countryCode=(resp && resp.country) ? resp.country : "";
      callback(countryCode);
    });
  },
  utilsScript : "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.0/js/utils.js"
});

var handleChange_1 = function() {
var text_1 = intl_1.isValidNumber()? intl_1.getNumber() : "";
document.getElementById("Fr_Phone_1").value = text_1.replace('+','00');
};
document.querySelector("#Fr_Telephone_1").addEventListener('change', handleChange_1);
document.querySelector("#Fr_Telephone_1").addEventListener('keyup', handleChange_1);

var mask_1 = $("#Fr_Telephone_1").attr('placeholder').replace(/[0-9]/g, 0);
$(document).ready(function () {$('#Fr_Telephone_1').mask(mask_1)});

$("#Fr_Telephone_1").on("countrychange", function (e, countryData) {
    $("#Fr_Telephone_1").val('');
    var mask_1 = $("#Fr_Telephone_1").attr('placeholder').replace(/[0-9]/g, 0);
    $('#Fr_Telephone_1').mask(mask_1);
});

Open in new window


Finally, if I delete the formatting by decapping this code, I would have 0612345678
var mask_1 = $("#Fr_Telephone_1").attr('placeholder').replace(/[0-9]/g, 0);
$(document).ready(function () {$('#Fr_Telephone_1').mask(mask_1)});

$("#Fr_Telephone_1").on("countrychange", function (e, countryData) {
    $("#Fr_Telephone_1").val('');
    var mask_1 = $("#Fr_Telephone_1").attr('placeholder').replace(/[0-9]/g, 0);
    $('#Fr_Telephone_1').mask(mask_1);
});

Open in new window

Anyone have an idea please?

Thank you for your help !
Avatar of leakim971
leakim971
Flag of Guadeloupe image

could you post your whole page with code?
Avatar of Jaber Ahmad

ASKER

I understood the problem came from where.
Here I have two such input.
The first is loaded France and the second Ivory Coast
The figures for France are 10 digits and those for Côte d'Ivoire are 8 digits.

https://www.sivop.com/test-tel.php

It's the same code for both except that the loading generates my concerns.
If I put the first current zone (France) in Ivory Coast, I would get 8 digits even if I select France.
ASKER CERTIFIED SOLUTION
Avatar of Jaber Ahmad
Jaber Ahmad
Flag of Côte d'Ivoire image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial