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

Подключаем библиотеку jQuery и плагин jquery.maskedinput:

Далее для инпута c id="phone" создаем маску:

$("#phone").mask("+7 (999) 999 - 9999");

1	$("#phone").mask("+7 (999) 999 - 9999");

Значения для создания маски:

a - буквы алфавита (A-Z,a-z)

9 - цифры (0-9)

* - буквы и цифры (A-Z,a-z,0-9)

По умолчанию если пользователь не завершил ввод данных, они сбрасываются. Для отмены убираем очистку поля:

$("#phone").mask("+7 (999) 999 - 9999",{autoclear: false});

1	$("#phone").mask("+7 (999) 999 - 9999",{autoclear: false});

По умолчанию на место ввода значения ставится знак подчеркивания, для его замены нужно прописать свой placeholder:

$("#phone").mask("+7 (999) 999 - 9999",{placeholder:" "});

1	$("#phone").mask("+7 (999) 999 - 9999",{placeholder:" "});

Плагин также может выполнить функцию после завершения ввода:

$("#phone").mask("+7 (999) 999 - 9999",{completed:function(){alert("ОК!");}});

1	$("#phone").mask("+7 (999) 999 - 9999",{completed:function(){alert("ОК!");}});

<input placeholder="Ваш телефон:" id="phone" type="text" />

1	<input placeholder="Ваш телефон:" id="phone" type="text" />

$("#phone").mask("+7 (999) 999 - 9999",{autoclear: false, completed:function(){alert("ОК!");}});

1	$("#phone").mask("+7 (999) 999 - 9999",{autoclear: false, completed:function(){alert("ОК!");}});

Автор плагина Josh Bush

рустам: 06.10.2021 в 23:07

а что делать если код начинается с +995 ?

Ответить
- Alexander: 07.10.2021 в 08:18
  Замените в плагине девятку, например на тильду:
  
  "9": "[0-9]",
  
  на
  
  "~": "[0-9]",
  
  И для обозначения цифр используйте ее:
  
  $("#phone").mask("+995 - ~~~ - ~~~~",{autoclear: false});
  Ответить
Макс: 24.12.2020 в 22:49

На jquery-2.1.1, не работает

Ответить
- Alexander: 25.12.2020 в 09:45
  
  Работает!
  https://codepen.io/atuin/pen/jOMarYQ
  
  Ответить