Элементы сайта
Маска ввода телефона. jQuery Mask Plugin
Одним из основных элементов для отправки данных с сайта является форма обратной связи. В поля формы можно вводить разные данные по маске: телефон, дату, серийные номера и др. Для создания маски существует специальный плагин jQuery Mask Plugin. Плагин позволяет использовать и создавать различные варианты масок из букв, цифр и знаков.
Для использования плагина jQuery Mask Plugin сначала надо подключиться к библиотеке jQuery и самому плагину. Скачать плагин jQuery Mask Plugin можно здесь.
Код для подключения:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="jquery-3.3.1.maskedinput.min.js" type="text/javascript"></script>
Маска может содержать следующие символы:
- a – любые буквы из диапазона A-Z,a-z
- 9 – любые цифры из диапазона 0-9
- * – любые буквы или цифры A-Z,a-z,0-9
Далее можно вызвать плагин с различными параметрами.
<script> $(document).ready(function(){ $("#phone").mask("+7(999) 999-9999"); $("#phone2").mask("+7(999) 999-99-99"); $("#date").mask("99/99/9999"); $("#phonedop").mask("+7(999) 999-9999? x99999"); $("#pk").mask("a*-999-a999"); }) </script>
Плагин Masked Input Plugin также предоставляет следующие воможности:
- placeholder позволяет установить текст, который увидит пользователь при клике мышки в поле input.
<script> $(document).ready(function(){ $("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy"}); }) </script>
- completed выполняет действие после ввода данных пользователем по маске ввода. Например, сообщение о том, что пользователь ввел дату.
<script> $(document).ready(function(){ $("#date").mask("99/99/9999",{completed:function(){alert("Вы ввели дату: " +this.val());}}); }) </script>
- definitions позволяет создавать свои маски для ввода символов.
<script> $(document).ready(function(){ $.mask.definitions['~']='[+-]'; $("#myscript").mask("~9.99 ~9.99 999"); }) </script>
В этом примере символ ~ является шаблоном для ввода символов + и -
Перевод курсора в начало маски
Источник: https://webstool.ru/jquery.maskedinput.html
Чтобы при щелчке по маске курсор переместился в начало маски, а не остался в месте клика посередине маски, необходимо исользовать следующий плагин.
<script> $.fn.setCursorPosition = function(pos) { if ($(this).get(0).setSelectionRange) { $(this).get(0).setSelectionRange(pos, pos); } else if ($(this).get(0).createTextRange) { var range = $(this).get(0).createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } }; </script>
Цифра при вызове .setCursorPosition(3) указывает на позицию, в которой должен быть поставлен курсор:
<script> $("#phone").click(function(){ $(this).setCursorPosition(3); }).mask("+7(999) 999-9999"); </script>
Для отключения автозаполнения поля тепефона можно использовать атрибут autocomplete="off" для input (https://webstool.ru/otklyuchit-avtozapolnenie-input.html)
Ниже приведен пример полей с различными масками ввода данных и переводом курсора при щелчке по полю в начало маски (скачать пример).
Код этого примера:
<!DOCTYPE html> <html lang="ru"> <headgt <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Ввод телефона по маске на jQuery</title> <link rel="stylesheet" href="css/bootstrap-4.1.1.min.css"> <style> form { border: 1px solid #87CEEB; margin: 10px; padding: 10px; } </style> </head> <body> <div style="width:60%; margin:auto"> <form action="" method="POST"> <legend>Различные поля с вводом по маске</legend> <div class="form-group"> <label for="">Ваше имя</label> <input type="text" class="form-control" id="" name="name" placeholder="Имя"> <code>Поле без маски</code> </div> <div class="form-group"> <label for="">Телефон</label> <input type="text" class="form-control" id="phone" name="phone" placeholder="+7 (999) 999-9999"> <code>$("#phone").mask("+7 (999) 999-9999");</code> </div> <div class="form-group"> <label for="">Телефон с другой маской</label> <input type="text" class="form-control" id="phone2" name="phone2" placeholder="+7 (999) 999-99-99"> <code>$("#phone2").mask("+7(999) 999-99-99");</code> </div> <div class="form-group"> <label for="">Телефон с добавочным номером</label> <input type="text" class="form-control" id="phonedop" name="phonedop" placeholder="+7 (999) 999-9999"> <code>$("#phoneadd").mask("+7(999) 999-9999? x99999");</code> </div> <div class="form-group"> <label for="">Дата</label> <input type="text" class="form-control" id="date" name="date" placeholder="mm/dd/yyyy"><code>$("#date").mask("99/99/9999");</code> </div> <div class="form-group"> <label for="">Ключ продукта (Product Key)</label> <input type="text" class="form-control" id="pk" name="pk" placeholder="a*-999-a999"> <code>$("#pk").mask("a*-999-a999");</code> </div> <button type="reset" class="btn btn-primary mb-2">Сбросить</button> </form> </div> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/jquery-3.3.1.maskedinput.min.js"></script> <script> $.fn.setCursorPosition = function(pos) { if ($(this).get(0).setSelectionRange) { $(this).get(0).setSelectionRange(pos, pos); } else if ($(this).get(0).createTextRange) { var range = $(this).get(0).createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } }; </script> <script> $(document).ready(function() { $("#phone").click(function(){ $(this).setCursorPosition(1); }).mask("+9(999) 999-9999"); $("#phone2").click(function(){ $(this).setCursorPosition(1); }).mask("+9(999) 999-99-99"); $("#phonedop").click(function(){ $(this).setCursorPosition(1); }).mask("+9(999) 999-9999? x99999"); $("#date").click(function(){ $(this).setCursorPosition(0); }).mask("99/99/9999"); $("#pk").click(function(){ $(this).setCursorPosition(0); }).mask("a*-999-a999"); }); </script> </body> </html>
Ссылки по теме:
https://igorescobar.github.io/jQuery-Mask-Plugin/docs.html
https://blog.maxgraph.ru/2018/09/10/jquery-maskedinput-kak-s-nim-rabotat-odna-nestandartnaya-ficha/
https://github.com/digitalBush/jquery.maskedinput
https://bezramok-tlt.ru/blog/posts/jquery-vvod-telefona-po-maske
https://webstool.ru/jquery.maskedinput.html
https://webstool.ru/otklyuchit-avtozapolnenie-input.html