Подключение плагинов:
https://github.com/jackocnr/intl-tel-input (https://intl-tel-input.com/)
https://github.com/digitalBush/jquery.maskedinput
Подключение js:
<script src="/assets/js/jquery.maskedinput.min.js"></script>
<script src="/assets/js/intl-tel-input/js/intlTelInput-jquery.min.js"></script>
Подключение css:
@import '../js/intl-tel-input/css/intlTelInput.min.css';
JS:
function phone_mask(){
$.mask.definitions['9']='';
$.mask.definitions['d']='[0-9]';
$("input[name=phone],input.phone").mask("+7 ddd ddd-dd-dd");
$("input[name=phone],input.phone").intlTelInput({
autoHideDialCode:false,
autoPlaceholder:"aggressive",
placeholderNumberType:"MOBILE",
preferredCountries:['ru','th'],
separateDialCode:true,
utilsScript:"/assets/js/intl-tel-input/js/utils.js",
customPlaceholder:function(selectedCountryPlaceholder,selectedCountryData){
return '+'+selectedCountryData.dialCode+' '+selectedCountryPlaceholder.replace(/[0-9]/g,'_');
},
//allowDropdown:false,
//dropdownContainer:document.body,
//excludeCountries:["us"],
//formatOnDisplay:false,
//geoIpLookup:function(callback){
// $.get("http://ipinfo.io",function(){},"jsonp").always(function(resp){
// var countryCode =(resp&&resp.country)?resp.country:"";
// callback(countryCode);
// });
//},
//hiddenInput:"full_number",
//initialCountry:"auto",
//localizedCountries:{'de':'Deutschland'},
//nationalMode:false,
//onlyCountries:['us','gb','ch','ca','do'],
});
$("input[name=phone],input.phone").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');
$(this).mask($(this).attr('placeholder').replace(/[_]/g,'d'));
});
}
$(document).ready(function(){
//example with fancybox
$('.popup').fancybox({
helpers:{title:null},
padding:'0',
width:'800',
beforeShow:function(){
phone_mask();
}
});
//init
phone_mask();
});
Когда текст обрезается после первого смайла (эмодзи).
Использовать кодировку utf8mb4_general_ci
вместо utf8_general_ci
Чтобы в свойство css content автоматически подставлялось значение атрибута data-name тега.
Пример на less:
div{
&:after{
content:~"attr(data-name)";
}
}
html:
<div data-name="test"></div>