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

Маска для ввода номера телефона дает понять человеку в каком формате вводить номер, а также не позволяет вводить лишние символы и является дополнительной валидацией контактной формы. Это в конечном итоге хорошо и для безопасности сайта. Особенно часто можно встретить применение маски телефона в Landing Page.

Помимо поля для телефона маску ввода номера можно использовать, например, для поля формы даты рождения и прочих полей контактной формы.

Для понимания, о чем идет речь вообще, привожу скриншот одного из вариантов маски для ввода номера телефона.

Видите, номер телефона вводится последовательно и упрощает заполнение поля с номером телефона (в данном случае).

Маска для ввода номера телефона, плагин jquery.maskedinput.js

подключение библиотеки jQuery

Для работы плагина необходимо подключение библиотеки jQuery

Хотя сейчас практически в любом сайте, на любой CMS уже по определению должна быть подключена библиотека jQuery, все же приведу пример подключения последней на данный момент версии с серверов MaxCDN.
Подключение библиотеки jQuery

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Более подробно о подключении скриптов и подключении скриптов к WordPress в частности написано в статье Подключение скрипта к WordPress

Далее идем на сайт создателей плагина маски для ввода номеров телефона и др. и копируем скрипт jquery.maskedinput.js. Там сам скрипт нужно будет скопировать и создать файл с аналогичным названием (либо с другим, непринципиально). Естественно подключаем скрипт после библиотеки, желательно в footer сайта.
В итоге промежуточный вариант получается примерно такой:

<script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>

Ну и теперь создаем саму маску ввода номера телефона по ID поля ввода

<script type="text/javascript">
 jQuery(function($){
$("#telephone").mask("+7(999) 999-9999");
 });
</script>

#telephone — ID поля для заполнения телефонного номера.
("+7(999) 999-9999") — маска для заполнения номера в таком формате, как на скрине выше. Девятки означают, что можно вводить числа от нуля до девяти.

Если убрать отсюда +7, то получться маска заполнения номера телефона, без кода страны типа (___) __ — _ — _

Ну и само поле для ввода номера телефона должно выглядеть примерно так:

<input type="tel" id="telephone" name="phone" placeholder="Номер телефона">

Тут id=telephone должен соответствовать #telephone, что задан в скрипте выше. ID можно задавать любой, главное чтобы он был одинаковый и в скрипте и в форме-маске для ввода номера телефона.

Я привел один из примеров использования маски для заполнения полей контактной формы. Более подробную информацию можно узнать на сайте разработчиков плагина, я выше ссылку скинул.

Купить 2 комнатную квартиру в рязани рязань недвижимость квартиры купить двухкомнатные. https://lakolux.ru краски оптом в екатеринбурге.

Маска для ввода номера телефона, плагин jquery.maskedinput.js

подключение библиотеки jQuery

Ну и теперь создаем саму маску ввода номера телефона по ID поля ввода

Похожие по Тегам статьи