УЧЕБНЫЕ МАТЕРИАЛЫ

Web-верстка, компьютерная графика,
мультимедиа

Элементы сайта




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

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

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



Поле без маски



$("#phone").mask("+7 (999) 999-9999");



$("#phone2").mask("+7(999) 999-99-99");



$("#phoneadd").mask("+7(999) 999-9999? x99999");




$("#pk").mask("a*-999-a999");



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

<!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