Маска ввода телефона. 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.maskedinput.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>

В этом примере символ ~ является шаблоном для ввода символов + и -

Ниже приведен пример полей с различными масками ввода данных (скачать пример).

Поля с вводом по различным маскам

Поле без маски
$("#phone").mask("+7 (999) 999-9999");
$("#phone2").mask("+7(999) 999-99-99");
$("#phoneadd").mask("+7(999) 999-9999? x99999");
$("#date").mask("99/99/9999");
$("#pk").mask("a*-999-a999");



Код этого примера:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <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>
      $(document).ready(function() {
      $("#phone").mask("+7 (999) 999-9999");
      $("#phone2").mask("+7(999) 999-99-99");	  
      $("#phonedop").mask("+7(999) 999-9999? x99999");	
      $("#date").mask("99/99/9999");
      $("#pk").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