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

На этом уроке с помощью плагина 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>

Сегодня я расскажу вам, как можно улучшить форму обратной связи с помощью маски ввода телефона. Рассмотрим, как это реализовать на различных проектах.

Первый вариант – мы подключим маску к контактной форме на чистом html.

Второй вариант – мы рассмотрим, как сделать маску телефона для Contact Form 7, и заодно, как правильно подключать скрипты в WordPress через файл functions.php.

Содержание

1. Маска ввода телефона к форме на html + js
2. Маска телефона в WordPress плагине Contact Form 7
3. Файлы для скачивания

Сперва посмотрим о чем идет речь:

В это поле можно вводить только цифры, и строго то количество которое задано у вас в маске.

Итак начнем! В обоих случаях нужно скачать файлы плагина jQuery Masked Input по этой ссылке с официального репозитория. Также даю ссылку на документации по плагину на GitHub.   

Маска ввода телефона к форме на html + js

1. Создаем простую форму

1
2
3
4
5
6
7

<form>
<div id="form-inner">
<label for="name">Ваш Телефон</label>
<input type="text" id="phon" placeholder="+375 (XX) XXX-XX-XX">
<input type="submit" class="button" value="отправить">
</div>
</form>

2. Проверяем подключение библиотеки JQuery

Обязательно проверьте подключение библиотеки jquery между тегами <head>. Для этого в браузере, на странице вашего сайта введите команду CTRL+U, откроется код страницы. Теперь, с помощью команды CTRL+F найдите подключен скрипт JQuery или нет. Можно искать по фразе “jquery.js” или “jquery.min.js”. Пример, как выглядит в коде, ниже на скриншоте.

Она может быть подключена как из папки со скриптами у вас на сайте, так и через CDN Google или через другой, например Microsoft, CDNJS, jsDelivr. Посмотреть способы подключения можно на официальном сайте JQuery на странице скачивания, или перейти по ссылке. Если библиотека у вас не подключена, то нужно обязательно подключить, иначе работать “маска” не будет. 

Мне удобно подключать через CDN Google. Чтобы подключить библиотеку JQuery скопируйте код ниже и вставьте между тегами <head> вашего сайта.

1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

3. Подключаем скрипты плагина

После того как мы убедились, что библиотека JQuery подключена, распаковываем скаченный архив с плагином “jQuery Masked Input”. Внутри архива находим папку “dist” и забираем оттуда минимизированный файл “jquery.maskedinput.min.js”. Я обычно кладу этот файл в корень сайта в папку со всеми скриптами “js”, и подключаю его между тегами <head>:

1

<script src="https://мой-домен.com/js/jquery.maskedinput.min.js"></script>

Далее нам нужно сделать вызов кода маски и привязать его к уникальному идентификатору. Мы можем сделать это прописав уникальный class или id к полю input. В нашем случае мы пропишем id phon. Далее просто перед формой нужно вставить вот этот код:

1

<script type="text/javascript">jQuery(function($){$("#phon").mask("+375 (99) 999-99-99");});</script>

Или, чтобы не вставлять каждый раз код скрипта перед каждой формой, создаём отдельный файл js, например maskphone.js, туда вставляем код ниже и сохраняем в папку “js” в корне сайта.

1

jQuery(document).ready(function() {jQuery("#phon").mask("+375 (99) 999-99-99");});

Теперь этот файл тоже нужно подключить между тегами <head>, скопируйте код ниже и вставьте его сразу после кода подключения плагина jquery.maskedinput.min.js. Должно получиться так:

1
2

<script src="https://мой-домен.com/js/jquery.maskedinput.min.js"></script>
<script src="https://мой-домен.com/js/maskphone.js"></script>

4. Определяем в какой форме и в каком поле будет работать плагин.

Всё, что нам нужно сделать, чтобы идентифицировать поле, это указать class или id в нужном поле input. Пример на картинке. На практике используйте что-то одно.

В примере, который я вам привёл, я использовал id – уникальное имя элемента. В таком случае, если у вас несколько одинаковых форм на одной странице маска телефона работать не будет. Так как id на странице может повторяться только 1 раз. Поэтому, если у вас на странице вызывается много раз одна и та же форма нужно прописать в поле input уникальный class.

Пример:

1

<input type="text" class="phon" placeholder="+375 (XX) XXX-XX-XX">

А для активации скрипта в поле по class необходимо заменить код в maskphone.js на следующий:

1

jQuery(document).ready(function() {jQuery(".phon").mask("+375 (99) 999-99-99");});

С этим все, теперь рассмотрим как сделать тоже самое на одной из самых популярных CMS WordPress и дополнительного плагина к ней Contact Form 7.

Что такое «паттерн» и что такое «маска»

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

Код выглядит примерно так:

<input type="tel" pattern="2-[0-9]{3}-[0-9]{3}">

Маска — это строгий шаблон ввода символов. Если при использовании обычного паттерна мы не можем сделать так, чтобы пользователь просто вводил цифры и они расставлялись как нам нужно, то как раз таки маска позволяет это сделать. Есть куча различных решений, лично мне понравился простой скрипт, который подсмотрел на этом сайте. Для использования достаточно присвоить класс «tel» вашему полю. Пример такой маски Вы можете посмотреть, щелкнув на кнопку ниже:

Пример

Готовый скрипт для ввода телефонного номера

HTML код поля выглядит примерно так:

<input value="" class="tel">

JS код скрипта:

window.addEventListener("DOMContentLoaded", function() {
    [].forEach.call( document.querySelectorAll('.tel'), function(input) {
    var keyCode;
    function mask(event) {
        event.keyCode && (keyCode = event.keyCode);
        var pos = this.selectionStart;
        if (pos < 3) event.preventDefault();
        var matrix = "+7 (___) ___ ____",
            i = 0,
            def = matrix.replace(/D/g, ""),
            val = this.value.replace(/D/g, ""),
            new_value = matrix.replace(/[_d]/g, function(a) {
                return i < val.length ? val.charAt(i++) || def.charAt(i) : a
            });
        i = new_value.indexOf("_");
        if (i != -1) {
            i < 5 && (i = 3);
            new_value = new_value.slice(0, i)
        }
        var reg = matrix.substr(0, this.value.length).replace(/_+/g,
            function(a) {
                return "\d{1," + a.length + "}"
            }).replace(/[+()]/g, "\$&");
        reg = new RegExp("^" + reg + "$");
        if (!reg.test(this.value) || this.value.length < 5 || keyCode > 47 && keyCode < 58) this.value = new_value;
        if (event.type == "blur" && this.value.length < 5)  this.value = ""
    }

    input.addEventListener("input", mask, false);
    input.addEventListener("focus", mask, false);
    input.addEventListener("blur", mask, false);
    input.addEventListener("keydown", mask, false)

  });

});

Как подключить данный скрипт к Joomla

 Скрипт подключается очень легко. Просто добавьте его в папку JS вашего шаблона, а в index.php там где подключаете скрипты добавьте строчку:

$doc->addScriptVersion($this->baseurl . '/templates/' . $this->template . '/js/js-inputmask.js');

Кстати, на этом сайте я сразу же заменил все паттерны для телефонных номеров, все работает отлично на последней версии joomla. Само собой, что скрипт можно использовать не только на joomla, а где угодно.

Скачать скрипт можно здесь

Напоминаю, что вопросы можно задать в группе https://t.me/newqosgroup

Маска телефонного номера — это строка символов, которая используется для представления реального телефонного номера. Маска используется для того, чтобы облегчить пользователям ввод номера телефона в поле формы. Маска также помогает проверить номер телефона на стороне браузера.

Для создания маски для ввода телефона мы будем использовать Imask.js.

Преимущества использования imask.js:

• Библиотека легкая и простая в использовании.
• Она может быть настроена в соответствии с потребностями вашего проекта.
• Работает со всеми основными браузерами.
• Поддерживает локализацию.

Полезные ссылки

• Пример работы маски для телефона: https://toni.codelab.pro/phone-mask/index.html
• Стартовый проект на GitHub: https://github.com/toni-wheel/youtube-phone-mask-start
• Библиотека Imask.JS: https://imask.js.org/

Создаем маску для номера телефона

В качестве примера создадим форму для сборка заявок с номерами телефонов. Мы вводим номер телефона в российском формате +7(900)111-11-11. Маска не позволит нам ошибиться, а также сделает ввод номера более наглядным.

Кнопка Отправить становится активной только когда номер введен корректно.

Подключаем библиотеку Imask.js

Для начала вам необходимо будет скачать стартовый проект на моем GitHub.

Рассмотрим два основных вариантов подключения Imask.js.

Подключение через CDN

Для подключения скрипта напрямую с хранилища Unpkg в конце файла index.html вставьте скрипт:

<script src="https://unpkg.com/imask"></script>

Установка в NPM

Если вы пользуетесь пакетным менеджером NPM — можете установить его в качестве зависимости:

npm install imask

А далее импортировать в проект:

import IMask from 'imask';

Дополнительные стили для кнопки

Кнопка Отправить должна быть по умолчанию не активна и только, если номер заполнен верно — делаем ее активной. Поработаем со стилями нашей кнопки в style.css.

.container .form .btn {
  margin-left: 20px;
  padding: 20px;
  font-size: 25px;
  border: none;
  background-color: #f69b64;
  color: #fff;
  pointer-events: none; /* Добавить */
}

/* Добавить дополнительный класс */
.container .form .btn--active {
  pointer-events: auto;
  background-color: #ff8438;
  cursor: pointer;
}

Чтобы сделать кнопку неактивной используем свойство pointer-events со значением none. Класс btn—active делает кнопку снова активной и меняет ее цвет на более яркий.

Скрипт для работы маски и кнопки отправки

Описание скрипта в комментариях к коду.

// Считываем поле ввода
let phoneInput = document.querySelector(".phone");
// Считываем кнопку
let btn = document.querySelector(".btn");

// Создаем маску в инпуте
const phoneMask = new IMask(phoneInput, {
  mask: "+{7}(000)000-00-00",
});

// Обработчик события для инпута
phoneInput.addEventListener("input", phoneInputHandler);
// Обработчик события для кнопки
btn.addEventListener("click", btnHandler);

// Если ввели правлильно - кнопка активна
function phoneInputHandler() {
  if (phoneMask.masked.isComplete) {
    btn.classList.add("btn--active");
  } else {
    btn.classList.remove("btn--active");
  }
}

// Отправляем номер телефона
async function btnHandler(e) {
  e.preventDefault();
  return await fetch("send_msg.php", {
    method: "POST",
    body: phoneMask.unmaskedValue,
  });
}

Мы создаем объект маски phoneMask, который привязываем к полю phoneInput. Объект phoneMask имеет поля для работы, например:

• phoneMask.masked.isComplete — проверяет полностью ли введен номер
• phoneMask.unmaskedValue — переводит номер из маски в обычное число

Например номер +7(900)111-11-11 будет выглядеть так: 79001111111.

Более подробную информацию ищите в документации.

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

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

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

1. Кнопка:

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

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

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

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