Маска для телефона

Как добавить маску для телефона? Как установить маску для номера телефона?

Содержание:
1.Маска с автоматическим выбором страны

2.Маска с фиксированным количеством знаков (для одной страны)
3.Маска с плавающим количеством знаков (для нескольких стран)


Важно! Скрипт работает корректно, если выбран тип поля формы "Телефон".

Результат установки будет на опубликованной странице. 

1.Маска с автоматическим выбором страны

Код необходимо добавить в настройках страницы (раздел “Метрика и скрипты” - “Добавить плагин - Произвольный код - поле “BODY"):

<link rel="stylesheet" href="https://neremaitea.github.io/intltelplp/intlTelInput.css">
<script src="https://neremaitea.github.io/intltelplp/intlnew.js"></script>
<script>
var ai=$("div[data-type=phone] input, div[plp-field=phone] input, div[cr-field=phone] input");
ai.closest('.widget-field').css('z-index', '50');ai.attr("type", "tel");
ai.each(function() {
$(this).css('border')==''&&$(this).closest('.input').prev().css('padding-left','44px');
});
var defstr = "ru" // страна по умолчанию, если не удалось ее определить
$.ajax({url: '//ipinfo.io',method: 'get',
dataType: 'json',success: function(r){str=r.country.toLowerCase()},
error: function() {str=defstr},
complete:function () {
$(ai).intlTelInput({
defaultCountry: str})}});
</script>

2.Маска формата +7 (999) 999-9999: 

Код необходимо добавить в настройках страницы (раздел “Метрика и скрипты” - “Добавить плагин - Произвольный код - поле “BODY"):

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/digitalBush/jquery.maskedinput@master/dist/jquery.maskedinput.min.js"></script>
<script type="text/javascript">
var phoneInput = $("div[data-type=phone] input, div[plp-field=phone] input, div[cr-field=phone] input");
$(phoneInput).mask("+7 (999) 999-9999");
$(phoneInput).each(function() {
if ($(this).attr('value') ) $(this).attr('placeholder',$(this).attr('value'))})
$(phoneInput).change(function() {
if ($(this).val()=='') $(this).closest('phoneInput').removeClass('is-filled'); else
$(this).closest('phoneInput').addClass('is-filled')});
</script>


Важно! Результат будет на опубликованной странице. В редакторе маска отображаться не будет.

3.Маска формата +99999999999?9: 

Маска телефона, в которой можно указать 11 или 12 цифр. Она подойдёт и для номеров Украины, и для РФ. 

Код необходимо добавить в настройках страницы (раздел “Метрика и скрипты” - “Добавить плагин - Произвольный код - поле “BODY"):

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/digitalBush/jquery.maskedinput@master/dist/jquery.maskedinput.min.js"></script>
<script type="text/javascript">
var phoneInput = $("div[data-type=phone] input, div[plp-field=phone] input, div[cr-field=phone] input");
$(phoneInput).mask("+99999999999?9");
$(phoneInput).each(function() {
if ($(this).attr('value') ) $(this).attr('placeholder',$(this).attr('value'))})
$(phoneInput).change(function() {
if ($(this).val()=='') $(this).closest(phoneInput).removeClass('is-filled'); else
$(this).closest(phoneInput).addClass('is-filled')});
</script>


Важно! Результат будет на опубликованной странице. В редакторе маска отображаться не будет.

👆 На этом пока всё