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

Плагин дает возможность быстро создать маску для номера телефона +7(___)__-__-__, даты, номера кредитной карты и т.д.

Данная статья — перевод документации по Maskedinput на GitHub с расширеными примерами использования.

Маска определяется форматом, состоящим из литералов маски и определений маски. Любой символ, отсутствующий в списке определений ниже, считается литералом маски. Литералы маски будут автоматически вводиться для пользователя по мере их ввода и не могут быть удалены пользователем. Предопределены следующие стандартные обозначения:

• 9 — любая цифра [0-9]
• a — любой символ латинского алфавита [A-Za-z]
• * — цифра или символ латинского алфавита [A-Za-z0-9]
• Дополнительно можно определить свои

Подключение файлов

Файлы, необходимые для работы плагина (Версия jQuery 1.8.3+):

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.maskedinput@1.4.1/src/jquery.maskedinput.min.js" type="text/javascript"></script>

Примеры использования jQuery.Maskedinput

Обратите внимание, что во всех примерах на этом сайте подключен мини-плагин для решения проблемы с кликом по центру (см. последний раздел статьи)

Продвинутое использование плагина

Дополнительная кастомизация

Решение проблемы с кликом по центру

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

jQuery-плагин для установки курсора в определенной позиции pos:

$.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();
  }
};

Добавляем обработчик на поле ввода и затем ставим маску. Цифра при вызове .setCursorPosition(3) указывает на позицию, в которой должен быть поставлен курсор:

Современная альтернатива плагину

jQuery.Maskedinput был протестирован в Internet Explorer, Firefox, Safari, Opera и Chrome и весьма популярен даже в 2020 году. Однако стоит признать, что он хоть и выполняет свои функции, но все таки морально устарел (последний коммит в репозиторий был сделан в 2015 году). Основным преимуществом плагина является быстрота подключения и настройки.

Для тех, кто готов разобраться с библиотекой, которая «из коробки» не дружит с jQuery рекомендую Cleave.js. А в этом топике обсуждается как прикрутить ее к jQuery.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:

   Она выглядит вот так:

2. Текстовая ссылка:

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   

An input mask is a string expression that demonstrates the format of a valid user input value or we can say that it constraints user input. This is very useful if there are certain inputs in forms that require validation. In this article, we will learn how to apply an input mask for validating a phone number in an input element using jQuery.

There are two approaches that can be taken here:

Approach 1: Using the jQuery inputmask plugin, there are three input fields defined in the following example, each having a class of first-phone, second-phone and third-phone respectively. We select these elements using the jQuery class selector [$(“.class-name”)] and then apply the inputmask() method from the inputmask plugin on each input element. The parameter of this inputmask() method takes the specified string expression to constraint the user input to. In this case, we set three different formats of phone numbers for the three input fields.

CDN Link:

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.7/jquery.inputmask.min.js”></script>

Note: This link must be included in the index page to utilise the jQuery inputmask plugin and thus implement all its functionalities.

Syntax:

$(document).ready(function(){

    // A static mask
    $(selector).inputmask("99-9999999"); 
  
    // Mask which specifies options
    $(selector).inputmask({"mask": "(999)-999-9999"});
});

Example: Below example illustrates the use of jQuery Input Mask Phone Number Validation using .inputmask() plugin.

Output:

Approach 2: Using the jQuery maskedinput plugin. There are four input fields defined in the following example, each having a class of first-phone, second-phone, third-phone and fourth-phone respectively. We select these elements using the jQuery class selector [$(“.class-name”)] and then apply the mask() method from the maskedinput plugin on each input element. The parameter of this mask() method takes the specified string expression to constraint the user input to. In this case, we set four different formats of phone numbers for the four input fields.

CDN Link:  

<script src=

“https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js”>

</script>

Note: This link must be included in the index page to utilise the jQuery maskedinput plugin and thus implement all its functionalities.

Syntax:

$(document).ready(function(){
    $(selector).mask("99-9999999");
});

Example: Below is the example that illustrates the use of JQuery Input Mask Phone Number Validation using .mask() plugin.

Output:

An input mask is a string expression that demonstrates the format of a valid user input value or we can say that it constraints user input. This is very useful if there are certain inputs in forms that require validation. In this article, we will learn how to apply an input mask for validating a phone number in an input element using jQuery.

There are two approaches that can be taken here:

Approach 1: Using the jQuery inputmask plugin, there are three input fields defined in the following example, each having a class of first-phone, second-phone and third-phone respectively. We select these elements using the jQuery class selector [$(“.class-name”)] and then apply the inputmask() method from the inputmask plugin on each input element. The parameter of this inputmask() method takes the specified string expression to constraint the user input to. In this case, we set three different formats of phone numbers for the three input fields.

CDN Link:

<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.7/jquery.inputmask.min.js”></script>

Note: This link must be included in the index page to utilise the jQuery inputmask plugin and thus implement all its functionalities.

Syntax:

$(document).ready(function(){

    // A static mask
    $(selector).inputmask("99-9999999"); 
  
    // Mask which specifies options
    $(selector).inputmask({"mask": "(999)-999-9999"});
});

Example: Below example illustrates the use of jQuery Input Mask Phone Number Validation using .inputmask() plugin.

Output:

Approach 2: Using the jQuery maskedinput plugin. There are four input fields defined in the following example, each having a class of first-phone, second-phone, third-phone and fourth-phone respectively. We select these elements using the jQuery class selector [$(“.class-name”)] and then apply the mask() method from the maskedinput plugin on each input element. The parameter of this mask() method takes the specified string expression to constraint the user input to. In this case, we set four different formats of phone numbers for the four input fields.

CDN Link:  

<script src=

“https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js”>

</script>

Note: This link must be included in the index page to utilise the jQuery maskedinput plugin and thus implement all its functionalities.

Syntax:

$(document).ready(function(){
    $(selector).mask("99-9999999");
});

Example: Below is the example that illustrates the use of JQuery Input Mask Phone Number Validation using .mask() plugin.

Output:

На этом уроке с помощью плагина masked input рассмотрим процесс создания различных масок ввода текстовым элементам формы.

Назначение плагина masked input

Плагин masked input предназначен для установления маски ввода элементу input с помощью кода JavaScript. Данный плагин для своего функционирования требует наличие подключённой библиотеки jQuery. Скачать плагин jquery.maskedinput.js (jquery.maskedinput.min) можно посредством следующей ссылки:

Демо Скачать maskedInput

Подключение плагина

После того как Вы скачали этот плагин (файл js), его необходимо подключить. Это осуществляется с помощью элемента script:

<!-- Подключение библиотеки jQuery -->
<script src="jquery.js"></script>
<!-- Подключение jQuery плагина Masked Input -->
<script src="jquery.maskedinput.min.js"></script>

Создание HTML маски ввода

Создания маски ввода осушествляется в js коде с помощью следующих знаков:

• Цифра 9 – соответствует цифре от 0 до 9.
• Символ a – представляет собой любой английский символ (A-Z, a-z).
• Знак * — представляет собой любой алфавитно-цифровой символ (A-Z, a-z, 0-9).

Например рассмотрим процесс создания маски ввода телефона для элемента input, имеющего id="phone":

<!--HTML элемент, который будет иметь маску ввода телефонного номера  -->
<input  id="phone" type="text">
<script>
//Код jQuery, установливающий маску для ввода телефона элементу input
//1. После загрузки страницы,  когда все элементы будут доступны выполнить...
$(function(){
  //2. Получить элемент, к которому необходимо добавить маску
  $("#phone").mask("8(999) 999-9999");
});
</script>

Внимание: По умолчанию в качестве заполнителя маски используется знак нижнего подчеркивания (‘_’).

Если в качестве заполнителя Вы хотите использовать что-то другое, то его можно указать посредством параметра placeholder следующим образом:

<!--HTML элемент, который будет иметь заполнитель дд.мм.гггг -->
<input  id="date" type="text">
<!--HTML элемент, который будет иметь в качестве заполнителя пробел -->
<input  id="index" type="text">
<script>
$(function() {
  //задание заполнителя с помощью параметра placeholder
  $("#date").mask("99.99.9999", {placeholder: "дд.мм.гггг" });
  //задание заполнителя с помощью параметра placeholder
  $("#index").mask("999999", {placeholder: " " });
});
</script>

Кроме placeholder данный плагин имеет ещё параметр completed. Он предназначен для задания действий, которые будут выполнятся после того как пользователь завершит ввод маски ввода.

Например, выведем с помощью метода alert сообщение пользователю, когда он завершит ввод маски телефона:

<!-- Ввод номера телефона осуществляется с помощью маски  -->
<input  id="phone" type="text">
<script>
$(function(){
  //Использование параметра completed
  $("#phone").mask("8(999) 999-9999", {
    completed: function(){ alert("Вы ввели номер: " + this.val()); }
  });
});
</script>

Иногда бывают такие ситуации, когда одна часть маски является обязательной для заполнения, а другая часть нет. Чтобы это указать, в Masked Input используется знак '?'. Этот знак является специальным символом, после которого необходимо разместить часть маски необязательной для заполнения.

Например, пользователю необходимо ввести число от 0 до 0.99. При этом обязательным для заполнения является указание хотя бы одного знака после запятой.

<!-- Ввод номера телефона осуществляется с помощью маски  -->
<input  id="number" type="text">
<script>
jQuery(function($){
  //создания своего специального символа для маски
  $("#number").mask("0.9?9");
});
</script>

Настройка маски ввода Masked Input

Плагин Masked Input позволяет использовать в маске кроме предопределенных специальных знаков (9, a, *) свои собственные.

Например, создадим для маски специальный символ ~, который при вводе должен быть заменён на знак (+) или минус (-).

<!-- HTML элемент, имеющий маску телефона -->
<input  id="number" type="text">
<script>
jQuery(function($){
  //создания специального символа для маски
  $.mask.definitions['~']='[+-]';
  $("#number).mask("~9.99");
});
</script>

Например, создадим маску для ввода CSS цвета в шестнадцатеричном формате:

<!-- HTML элемент, имеющий маску для ввода цвета в шестнадцатиричном формате -->
<input  id="color" type="text">
<script>
jQuery(function($){
  //создания специального символа h для маски
 $.mask.definitions['h']='[A-Fa-f0-9]';
  $("#color).mask("#hhhhhh");
});
</script>

Пример создания маски ввода телефона

Рассмотрим пример создания маски для ввода телефона в зависимости от выбранной страны:

<div class="form-group">
  <label for="phone">Телефон: </label>
  <select id="country" class="form-control">
    <option value="ru"><img src="">Россия +7</option>
    <option value="ua">Украина +380</option>
    <option value="by">Белоруссия +375</option>
  </select>
  <input id="phone" type="text" class="form-control">
</div>

<script>
jQuery (function ($) {
  $(function() {
    function maskPhone() {
      var country = $('#country option:selected').val();
      switch (country) {
        case "ru":
          $("#phone").mask("+7(999) 999-99-99");
          break;
        case "ua":
          $("#phone").mask("+380(999) 999-99-99");
          break;
        case "by":
          $("#phone").mask("+375(999) 999-99-99");
          break;
      }
    }
    maskPhone();
    $('#country').change(function() {
      maskPhone();
    });
  });
});
</script>