HTML
<div class="input-group tel">
<input class="input-group__field input__field-phone" type="tel" autocomplete="off" required="" name="customer_telephone_visible" value="<?php echo $telephone; ?>" placeholder="___ ___-__-__" data-intl-tel-input-id="0">
<input type="hidden" name="telephone" id="customer_telephone" value="<?php echo $telephone; ?>" data-mask="999 999 99 99" required="required">
<label class="input-group__title">Телефон</label>
<?php if ($error_telephone) { ?>
<div class="text-danger"><?php echo $error_telephone; ?></div>
<?php } ?>
</div>JAVA SCRIPT
var store_code = 'ru';
// Маска для телефона
function phone_mask_simple(item){
$.mask.definitions['d']='[0-9]';
// $(item).mask("ddd-ddd-dd-dd");
var iti = window.intlTelInput(item, {
autoPlaceholder:"aggressive",
placeholderNumberType:"MOBILE",
preferredCountries: ['ru', 'ua', 'kz', 'by'],
separateDialCode:true,
initialCountry: store_code,
utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.12/js/utils.min.js",
customPlaceholder:function(selectedCountryPlaceholder,selectedCountryData){
return selectedCountryPlaceholder.replace(/[0-9]/g,'_');;
},
});
iti.promise.then(function() {
var mask = $(item).attr('placeholder').replace(/[_]/g,'d');
$(item).mask(mask, {
onChange: function(cep){
console.log('cep changed! ', cep);
},
});
});
$(item).focus();
var real_phone = $(item).parents('.input-group.tel').find('[type="hidden"]').val();
iti.setNumber(real_phone);
$(item).on("change",function(){
var real_number = iti.getNumber();
var real_number_input = $(item).parents('.input-group.tel').find('[type="hidden"]');
if (real_number_input.length) {
real_number_input.val(real_number);
}
});
$(item).on("close:countrydropdown",function(e,countryData){
$(this).val('');
// var mask=$(this).closest('.intl-tel-input').find('.selected-dial-code').html()+' '+$(this).attr('placeholder').replace(/[0-9]/g,'d');
var mask = $(item).attr('placeholder').replace(/[_]/g,'d');
$(item).mask(mask, {
onChange: function(cep){
console.log('cep changed! ', cep);
},
});
});
}
var inputs = document.querySelectorAll(".input__field-phone");
inputs.forEach(function(item, i, array){
item.addEventListener('focus', function() {
var iti = window.intlTelInputGlobals.getInstance(item);
if(!iti){
phone_mask_simple(item);
}
});
});