Установка:
Подключаем библиотеку jQuery и плагин jquery.maskedinput:
- Скачать: jquery.maskedinput.js
- Скачать: jquery.maskedinput.min.js
Далее для инпута c id="phone" создаем маску:
1 |
$("#phone").mask("+7 (999) 999 - 9999"); |
Значения для создания маски:
a - буквы алфавита (A-Z,a-z)
9 - цифры (0-9)
* - буквы и цифры (A-Z,a-z,0-9)
Настройки:
По умолчанию если пользователь не завершил ввод данных, они сбрасываются. Для отмены убираем очистку поля:
1 |
$("#phone").mask("+7 (999) 999 - 9999",{autoclear: false}); |
По умолчанию на место ввода значения ставится знак подчеркивания, для его замены нужно прописать свой placeholder:
1 |
$("#phone").mask("+7 (999) 999 - 9999",{placeholder:" "}); |
Плагин также может выполнить функцию после завершения ввода:
1 |
$("#phone").mask("+7 (999) 999 - 9999",{completed:function(){alert("ОК!");}}); |
Пример:
1 |
<input placeholder="Ваш телефон:" id="phone" type="text" /> |
1 |
$("#phone").mask("+7 (999) 999 - 9999",{autoclear: false, completed:function(){alert("ОК!");}}); |
а что делать если код начинается с +995 ?
Замените в плагине девятку, например на тильду:
на
И для обозначения цифр используйте ее:
На jquery-2.1.1, не работает
Работает!
https://codepen.io/atuin/pen/jOMarYQ