Jaber Ahmad
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:
Finally, if I delete the formatting by decapping this code, I would have 0612345678
Thank you for your help !
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);
});
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);
});
Anyone have an idea please?Thank you for your help !
could you post your whole page with code?
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.