9 Ноябрь 2017

Автор: mastweb Рубрика: Верстка Комментариев нет

Простой способ маски телефона и pattern input tel

Махровый халат с именной вышивкой - эксклюзивный подарок для всей семь!

Простой способ маски телефона
Например, есть форма обратной связи с полем введите номер телефона.

Изначально без маски телефона можно ввести любой номер в любом формате даже с буквами.

Мы сделаем, чтобы ввод телефона строго соответствовал заданной маске.

Содержание статьи

1 Простой и эффективный способ это сделать с помощью плагина jquery.
2 Добавим скрипт, чтобы работала маска.
3 Пример сложной маски телефона.
- 3.1 Скрипт для нескольких полей телефона в common.js.
4 Pattern input tel маски телефона в html.

Простой и эффективный способ это сделать с помощью плагина jquery.

Скачаем плагин с официального сайта jquery.

В поле поиска пишем mask и нажимаем на jQuery Masked Input.

jQuery Masked Input для маски телефона

Чтобы посмотреть инструкции работы плагина перейдем на github.

Из архива нам понадобится файл jquery.maskedinput.js.

Положим файл в папку с плагинами проекта libs и подключим новый плагин в файле gulpfile.js в том месте, где все подключенные скрипты упаковываются в один scripts.min.js.

Подробно о файле gulpfile.js можно прочитать тут.

подключаем плагин маски телефона к gulpfile.js

Добавим скрипт, чтобы работала маска.

Для этого откроем инструкцию и для телефона с идентификатором phone скопируем строку в common.js.

инструкция для маски телефона с идентификатором phone
Код в common.js.

$(function() {
 $("#phone").mask("(999) 999-9999");
});

$(function() {

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

});

Перейдем в index.html и у тега input телефона добавим id=phone.

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

Готовую форму с телефоном можно скачать тут.

Часть кода формы для маски телефона в index.html.

<div class="col-xs-12">
<input type="text" name="phone" id="phone" required placeholder="+7 (999) 111 22 33" class="form-control form-input">
</div>

</div>

Добавим скрипт, чтобы работала маска телефона

Пример сложной маски телефона.

Есть городской номер и сотовый сделаем две разные маски для каждого вида телефона.

Добавим два поля выбора в форме с помощью select.

Код формы в index.html

<div class="col-xs-12">
  <label for="phone">Телефон </label>
  <select id="vid" class="form-control">
    <option value="sot"><img src="">Сотовый +7</option>
    <option value="gor">Городской</option>
  </select>
<input type="text" name="phone" id="phone" required placeholder="+7 (999) 111 22 33" class="form-control form-input">
</div>

<label for="phone">Телефон </label>

<option value="sot"><img src="">Сотовый +7</option>

<option value="gor">Городской</option>

</select>

</div>

Скрипт для нескольких полей телефона в common.js.

$(function() {
  $(function() {
    function maskPhone() {
      var vid = $('#vid option:selected').val();
      switch (vid) {
        case "sot":
          $("#phone").mask("+7(999) 999-99-99");
          break;
        case "gor":
          $("#phone").mask("999-99-99");
          break;       
      }    
    }
    maskPhone();
    $('#vid').change(function() {
      maskPhone();
    });
  });

$(function() {

function maskPhone() {

var vid = $('#vid option:selected').val();

switch (vid) {

case "sot":

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

break;

case "gor":

$("#phone").mask("999-99-99");

break;

}

maskPhone();

$('#vid').change(function() {

maskPhone();

});

Пример сложной маски телефона

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

Pattern input tel маски телефона в html.

Использовать атрибут pattern нужно без скрипта jquery иначе будет конфликт!

Выражения pattern для маски телефона.

\d, второй вид записи [0-9]. Запись одной цифры от нуля до девяти.

[0-9]{3} и [0-9]{2}. Запись трех и двух цифр подряд.

\s. Обозначение пробела.

Этими выражениями мы заполним pattern любого телефона.

Пример записи в index.html.

<div class="col-xs-12">
<input type="tel" name="phone" id="phone" pattern="+7 ([0-9]{3}([0-9]{3})([0-9]{2})([0-9]{2})" required class="form-control form-input">
</div>

</div>