Установка:
Подключаем библиотеку 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("ОК!");}}); |
Автор плагина Josh Bush
Здравствуйте! А есть ли у вас такое решение, как скрытие последних цифр номера телефона и при нажатии цифры или просто открывались, или во всплывающем окне выводились с дополнительной информацией.
К примеру: https://disk.yandex.ru/i/cAxGwAeStKbrVA
При нажатии: https://disk.yandex.ru/i/FvoLURWzB_gnvQ
Такой нет, а зачем она вам?
Данные скрывают от всяких ботов, которые могут зайти без проблем собрать инфу всех пользователей.
На вашем сайте такие ходят? Если да, то нужно смотреть как храниться телефон, выводить без последних цифр и подтягивать по клику остальные. Либо как то шифровать последние цифры (чтобы их в коде было не обнаружить)
теперь это работает вот так
$(document).ready(function($){
Привет, как сделать так чтобы если я ставлю курсор в вередине поля то номер начинал заполнять с самого начала а не с середины ?
а что делать если код начинается с +995 ?
Замените в плагине девятку, например на тильду:
на
И для обозначения цифр используйте ее:
$("#phone").mask("+995 - ~~~ - ~~~~",{autoclear: false});На jquery-2.1.1, не работает
Работает!
https://codepen.io/atuin/pen/jOMarYQ