Маска для телефона
Содержание:
1. Маска с автоматическим выбором страны
2. Маска с фиксированным количеством знаков (для одной страны
3. Маска с плавающим количеством знаков (для нескольких стран
4. Маска с автоматическим выбором страны (новый кабинет)
5. Маска формата +7 (999) 999-9999 (новый кабинет)
Важно! Скрипт работает корректно, если выбран тип поля формы "Телефон".
Результат установки будет на опубликованной странице.
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>4. Маска с автоматическим выбором страны (новый кабинет)
Код необходимо добавить в настройках страницы (раздел “Плагины” - “Добавить плагин - выбираем плагин "Произвольный код" - поле “bodyEnd"):
<link rel="stylesheet" href="https://neremaitea.github.io/intltelplp/intlTelInput.css"> <script src="https://neremaitea.github.io/intltelplp/intlnew.js"></script> <script> function mask() { 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})}}); } mask(); $('[data-action=modal]').click(()=>{setTimeout(mask,500)}); </script>
5. Маска формата +7 (999) 999-9999 (новый кабинет)
Код необходимо добавить в настройках страницы (раздел “Плагины” - “Добавить плагин - выбираем плагин "Произвольный код" - поле “bodyEnd"):
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/digitalBush/jquery.maskedinput@master/dist/jquery.maskedinput.min.js"></script> <script type="text/javascript"> function mask() { 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).val()) { $(this).attr('placeholder', $(this).val()); } }); phoneInput.change(function() { if ($(this).val() === '') { $(this).closest('div').removeClass('is-filled'); } else { $(this).closest('div').addClass('is-filled'); } }); } $(document).ready(function() { setTimeout(mask, 500); $('[data-action=modal]').click(function() { setTimeout(mask, 500); }); }); </script>
Важно! Результат будет на опубликованной странице. В редакторе маска отображаться не будет.