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

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

Базовые примеры

Вызовите функцию mask для тех элементов, к которым вы хотите применить маску. Никаких дополнительных вызовов функции прописывать не нужно.

  • Маска для даты

    $("#date_1").mask("99/99/9999");

  • Маска номера телефона

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

  • Маска для банковской варты

    $("#card").mask("9999-9999-9999-9999");

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

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

Разберем разные варианты кастомизации

Добавление +7, или кода региона (оператора), содержищего девятки 9

  • Маска для телефона с фиксированным префиксом «+7»

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

  • Маска для телефона с фиксированным префиксом «8»

    $("#phone_3").mask("8(999) 999-9999");

  • Переопределение стандартных обозначений для указания номера с фиксированной девяткой, например код оператора

    $.mask.definitions['9'] = false;
$.mask.definitions['5'] = "[0-9]";
$("#phone_4").mask("8(921) 555-5555");

Отключение автозаполнения

Чтобы гарантированно отключить автозаполнение применяйте технику, описанную в моей заметке.

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

  • Заменить подчеркивание плэйсхолдера _ на другой символ

    $("#model").mask("9999_999",{placeholder:"-"});

  • Отключить стирание при незаполненных данных

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

    $("#product_2").mask("9999/999/99",{autoclear: false});

  • Сделать часть маски не обязательной

    Вы можете иметь часть вашей маски не обязательной. Перечислено после ‘?’ внутри маски считается необязательным. Типичным примером этого является номер телефона и дополнительный добавочный номер.

    $("#phone_dob").mask("8(999) 999-9999? доб.9999");

  • Переопределить стандартные обозначения

    Если вам не достаточно стандартных обозначений (9 — цифра, a — лат. буквы, * — цифры или лат. буквы), вы всегда можете добавить свои. Например, может быть, вам нужна маска, чтобы разрешить только шестнадцатеричные символы ([A-Fa-f0-9]), или только +-. Вы можете добавить свое собственное определение для заполнителя, скажем, «h». Обратите внимание, что вы можете указать любое регулярное выражение.

    $.mask.definitions['h'] = "[A-Fa-f0-9]";
$("#color").mask("#hhhhhh");

$.mask.definitions['~']='[+-]';
$("#eyescript").mask("~9.99 ~9.99 999");

  • Вызвать функцию после заполнения поля ввода

    $.mask.definitions['h'] = "[A-Fa-f0-9]";
$("#bgcolor").mask("#hhhhhh",{
  completed: function(){
    this.css('background-color'+this.val());
  }
});

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

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

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) указывает на позицию, в которой должен быть поставлен курсор:

  • Курсор всегда в начале

    $("#center_ok").click(function(){
  $(this).setCursorPosition(3);
}).mask("+7(999) 999-9999");
$("#center_not_ok").mask("+7(999) 999-9999");

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

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

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

Источник

I have a problem masking a phone input with jQuery and Masked Input Plugin.

There are 2 possible formats:

  1. (XX)XXXX-XXXX
  2. (XX)XXXXX-XXXX

Is there any way to mask it accepting both cases?

EDIT:

I tried:

$("#phone").mask("(99) 9999-9999"); 
$("#telf1").mask("(99) 9999*-9999");    
$("#telf1").mask("(99) 9999?-9999");

But it doesn’t works as I would like.

The closest one was (xx)xxxx-xxxxx.

I would like to get (xx)xxxx-xxxx when I type the 10th number, and (xx)xxxxx-xxxx when I type the 11th. Is it posible?

HasanG's user avatar

HasanG

12.5k29 gold badges99 silver badges152 bronze badges

asked Jul 24, 2012 at 15:02

JHispa's user avatar

7

Try this — http://jsfiddle.net/dKRGE/3/

$("#phone").mask("(99) 9999?9-9999");

$("#phone").on("blur", function() {
    var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );

    if( last.length == 3 ) {
        var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 );
        var lastfour = move + last;
        var first = $(this).val().substr( 0, 9 );

        $(this).val( first + '-' + lastfour );
    }
});

answered Jul 24, 2012 at 15:26

Zoltan Toth's user avatar

Zoltan TothZoltan Toth

46.6k12 gold badges117 silver badges134 bronze badges

7

Here is a jQuery phone number mask. No plugin required.
Format can be adjusted to your needs.

Updated JSFiddle.

HTML

<form id="example-form" name="my-form">
    <input id="phone-number" name="phone-number" type="text" placeholder="(XXX) XXX-XXXX">
</form>

JavaScript

$('#phone-number', '#example-form')

.keydown(function (e) {
    var key = e.which || e.charCode || e.keyCode || 0;
    $phone = $(this);

    // Don't let them remove the starting '('
    if ($phone.val().length === 1 && (key === 8 || key === 46)) {
        $phone.val('('); 
        return false;
    } 
    // Reset if they highlight and type over first char.
    else if ($phone.val().charAt(0) !== '(') {
        $phone.val('('+$phone.val()); 
    }

    // Auto-format- do not expose the mask as the user begins to type
    if (key !== 8 && key !== 9) {
        if ($phone.val().length === 4) {
            $phone.val($phone.val() + ')');
        }
        if ($phone.val().length === 5) {
            $phone.val($phone.val() + ' ');
        }           
        if ($phone.val().length === 9) {
            $phone.val($phone.val() + '-');
        }
    }

    // Allow numeric (and tab, backspace, delete) keys only
    return (key == 8 || 
            key == 9 ||
            key == 46 ||
            (key >= 48 && key <= 57) ||
            (key >= 96 && key <= 105)); 
})

.bind('focus click', function () {
    $phone = $(this);

    if ($phone.val().length === 0) {
        $phone.val('(');
    }
    else {
        var val = $phone.val();
        $phone.val('').val(val); // Ensure cursor remains at the end
    }
})

.blur(function () {
    $phone = $(this);

    if ($phone.val() === '(') {
        $phone.val('');
    }
});

answered Jul 9, 2015 at 18:29

Justin's user avatar

JustinJustin

25.6k16 gold badges109 silver badges126 bronze badges

4

Actually the correct answer is on http://jsfiddle.net/HDakN/

Zoltan answer will allow user entry «(99) 9999» and then leave the field incomplete

$("#phone").mask("(99) 9999-9999?9");


$("#phone").on("blur", function() {
    var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );

    if( last.length == 5 ) {
        var move = $(this).val().substr( $(this).val().indexOf("-") + 1, 1 );

        var lastfour = last.substr(1,4);

        var first = $(this).val().substr( 0, 9 );

        $(this).val( first + move + '-' + lastfour );
    }
});​

answered Sep 10, 2012 at 2:29

PH.'s user avatar

PH.PH.

3772 silver badges9 bronze badges

You need a jQuery plugin for the mask works as well.

— HTML — 

<input type="text" id="phone" placeholder="(99) 9999-9999">
<input type="text" id="telf1" placeholder="(99) 9999*-9999">
<input type="text" id="telf2" placeholder="(99) 9999?-9999">

— JAVASCRIPT —

<script src="https://raw.githubusercontent.com/igorescobar/jQuery-Mask-Plugin/master/src/jquery.mask.js"></script>
<script>
$(document).ready(function($){
    $("#phone").mask("(99) 9999-9999"); 
    $("#telf1").mask("(99) 9999*-9999");    
    $("#telf2").mask("(99) 9999?-9999"); 
});
</script>

answered Nov 6, 2015 at 15:57

Claudio Guirunas Goncalves's user avatar

3

You can use the phone alias with Inputmask v3

$('#phone').inputmask({ alias: "phone", "clearIncomplete": true });

$(function() {
  $('input[type="tel"]').inputmask({ alias: "phone", "clearIncomplete": true });
});
<label for="phone">Phone</label>
    <input name="phone" type="tel">

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/inputmask.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/inputmask.extensions.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/inputmask.numeric.extensions.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/inputmask.date.extensions.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/inputmask.phone.extensions.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/jquery.inputmask.js"></script>
<script src="https://cdn.jsdelivr.net/gh/RobinHerbots/Inputmask@3.3.7/dist/inputmask/phone-codes/phone.js"></script>

https://github.com/RobinHerbots/Inputmask#aliases

answered Jun 23, 2017 at 15:14

HarlemSquirrel's user avatar

HarlemSquirrelHarlemSquirrel

8,1565 gold badges32 silver badges33 bronze badges

1

var $phone = $("#input_id");
var maskOptions = {onKeyPress: function(phone) {
    var masks = ['(00) 0000-0000', '(00) 00000-0000'];
    mask = phone.match(/^([0-9]{2}) 9/g)
        ? masks[1]
        : masks[0];
    $phone.mask(mask, this);
}};
$phone.mask('(00) 0000-0000', maskOptions);

answered Sep 29, 2014 at 21:51

NovoK's user avatar

NovoKNovoK

1465 bronze badges

With jquery.mask.js

http://jsfiddle.net/brynner/f9kd0aes/

HTML

<input type="text" class="phone" maxlength="15" value="85999998888">
<input type="text" class="phone" maxlength="15" value="8533334444">

JS

// Function
function phoneMask(e){
    var s=e.val();
    var s=s.replace(/[_W]+/g,'');
    var n=s.length;
    if(n<11){var m='(00) 0000-00000';}else{var m='(00) 00000-00000';}
    $(e).mask(m);
}

// Type
$('body').on('keyup','.phone',function(){   
    phoneMask($(this));
});

// On load
$('.phone').keyup();

Only jQuery

http://jsfiddle.net/brynner/6vbrqe6z/

HTML

<p class="phone">85999998888</p>
<p class="phone">8599998888</p>

jQuery

$('.phone').text(function(i, text) {
    var n = (text.length)-6;
    if(n==4){var p=n;}else{var p=5;}
    var regex = new RegExp('(\d{2})(\d{'+p+'})(\d{4})');
    var text = text.replace(regex, "($1) $2-$3");
    return text;
});

answered Feb 13, 2015 at 15:56

Brynner Ferreira's user avatar

Brynner FerreiraBrynner Ferreira

1,5071 gold badge21 silver badges20 bronze badges

The best way to do this is using the change event like this:

$("#phone")
.mask("(99) 9999?9-9999")
.on("change", function() {

    var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );

    if( last.length == 3 ) {
        var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 );
        var lastfour = move + last;
        var first = $(this).val().substr( 0, 9 ); // Change 9 to 8 if you prefer mask without space: (99)9999?9-9999

        $(this).val( first + '-' + lastfour );
    }
})
.change(); // Trigger the event change to adjust the mask when the value comes setted. Useful on edit forms.

answered Nov 3, 2015 at 13:18

leoalmar's user avatar

leoalmarleoalmar

2265 silver badges14 bronze badges

The best way to do it on blur is: 

                        function formatPhone(obj) {
                        if (obj.value != "")
                        { 
                            var numbers = obj.value.replace(/D/g, ''),
                            char = {0:'(',3:') ',6:' - '};
                            obj.value = '';
                            upto = numbers.length; 

                            if(numbers.length < 10) 
                            { 
                                upto = numbers.length; 
                            }
                            else
                            { 
                                upto = 10; 
                            }
                            for (var i = 0; i < upto; i++) {
                                obj.value += (char[i]||'') + numbers[i];
                            }
                        } 
                    }

answered Feb 17, 2016 at 14:35

Rick James's user avatar

As alternative

    function FormatPhone(tt,e){
  //console.log(e.which);
  var t = $(tt);
  var v1 = t.val();
  var k = e.which;
  if(k!=8 && v1.length===18){
    e.preventDefault();
  }
  var q = String.fromCharCode((96 <= k && k <= 105)? k-48 : k);
  if (((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) && e.keyCode!=46 && e.keyCode!=37 && e.keyCode!=8 && e.keyCode!=39) {
 e.preventDefault();
  }
  else{
    setTimeout(function(){
      var v = t.val();
      var l = v.length;
      //console.log(l);
      if(k!=8){
        if(l<4){
          t.val('+7 ');
        }
        else if(l===4){
          if(isNaN(q)){
            t.val('+7 (');
          }
          else{
            t.val('+7 ('+q);
          }
        }
        else if(l===7){
          t.val(v+')');
        }
        else if(l===9){
          t.val(v1+' '+q);
        }
        else if(l===13||l===16){
          t.val(v1+'-'+q);
        }
        else if(l>18){
          v=v.substr(0,18);
          t.val(v);
        }
        }
        else{
          if(l<4){
            t.val('+7 ');
          }
        }
    },100);
  }
}

answered Jul 16, 2017 at 5:29

Choo Hwan's user avatar

Choo HwanChoo Hwan

4163 silver badges12 bronze badges

If you don’t want to show your mask as placeholder you should use jQuery Mask Plugin.

The cleanest way:

var options =  {
    onKeyPress: function(phone, e, field, options) {
        var masks = ['(00) 0000-00000', '(00) 00000-0000'];
        var mask = (phone.length>14) ? masks[1] : masks[0];
        $('.phone-input').mask(mask, options);
    }
};

$('.phone-input').mask('(00) 0000-00000', options);

answered May 24, 2018 at 19:45

Artur Haddad's user avatar

Artur HaddadArtur Haddad

1,3992 gold badges15 silver badges33 bronze badges

Yes use this

$("#phone").inputmask({"mask": "(99) 9999 - 9999"});

Link here

answered Jan 23, 2019 at 17:59

Sumit Kumar Gupta's user avatar

$('.phone').focus(function(e) {
    // add mask
    $('.phone')
        .mask("(99) 99999999?9")
        .focusin(function(event)
        {
            $(this).unmask();
            $(this).mask("(99) 99999999?9");
        })
        .focusout(function(event)
        {
            var phone, element;
            element = $(this);
            phone = element.val().replace(/D/g, '');
            element.unmask();

            if (phone.length > 10) {
                element.mask("(99) 99999-999?9");
            } else {
                element.mask("(99) 9999-9999?9");
            }
        }
    );
});

answered Jun 29, 2020 at 17:38

marceloleob's user avatar

Источник

Маски ввода для текстовых полей

Применение масок ввода у полей форм значительно упрощает их использование, уменьшает количество ошибок и приводит отправленные данные к единому формату.

Маски для полей легко сделать с помощью jQuery плагина Masked input plugin.

Подключение:

<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.maskedinput.min.js"></script>

HTML

1

Номер телефона

Мобильные, Москва, МО и Санкт-Петербург.

<input type="text" class="mask-phone form-control" placeholder="Номер телефона">

<script>
$('.mask-phone').mask('+7 (999) 999-99-99');
</script>

HTML

Данная маска иногда вызывает потерю клиента, некоторые люди не видят +7 и пишут 8903… в итоге теряется последняя цифра телефона. Лучше использовать другую маску c блокировкой первой цифры 8:

$.mask.definitions['h'] = "[0|1|3|4|5|6|7|9]"
$(".mask-phone").mask("+7 (h99) 999-99-99");

JS

2

Дата и время

DD.MM.YYYY (25.10.2017)

$('.mask-date').mask('99.99.9999');

JS

DD.MM.YYYY hh:mm (25.10.2017 18:25)

$('.mask-date').mask('99.99.9999 99:99');

JS

YYYY-MM-DD (2017-10-25)

$('.mask-date').mask('9999-99-99');

JS

YYYY-MM-DD hh:mm (2017-10-25 18:25)

$('.mask-date').mask('9999-99-99 99:99');

JS

3

Банковская карта

Номер карты

$('.mask-card-number').mask('9999 9999 9999 9999');

JS

Срок действия

$('.mask-card-date').mask('99/99');

JS

CVV2/CVC2

$('.mask-card-code').mask('999');

JS

4

Паспорт

Серия, номер

$('.mask-pasport-number').mask('99-99 999999');

JS

Код подразделения

$('.mask-pasport-division').mask('999-999');

JS

ИНН физического лица

12 значное число.

$('.mask-inn-individual').mask('999999999999');

JS

Cнилс

$('.mask-snils').mask('999-999-999 99');

JS

5

Реквизиты организации

ИНН организации

$('.mask-inn-organization').mask('9999999999');

JS

ОГРН

$('.mask-ogrn').mask('9999999999999');

JS

ОГРНИП

$('.mask-ogrnip').mask('999999999999999');

JS

КПП

$('.mask-kpp').mask('999999999');

JS

БИК

9-значное число начинающееся с цифр – «04» (код Российской Федерации).

$('.mask-bik').mask('049999999');

JS

Расчетный счет

20 цифр.

$('.mask-account').mask('99999 999 9 9999 9999999');

JS

6

Транспортные средства

Водительское удостоверение

$('.mask-driver').mask('99 ** 999999');

JS

СТС (свидетельство о регистрации транспортного средства)

$('.mask-sts').mask('99 99 999999');

JS

Номер полиса ОСАГО

$('.mask-osago').mask('aaa 9999999999');

JS

7

Интернет и сети

Mac-адрес

$.mask.definitions['h'] = '[A-Fa-f0-9]';
$('.mask-mac').mask('hh:hh:hh:hh:hh:hh');

JS

20.01.2017, обновлено 16.06.2021

Другие публикации

date() – форматирование даты PHP

date($format, $timestamp) – форматирует дату/время по шаблону, где…

Генерация QR-кода в PHP

Вопрос генерации QR-кодов в PHP достаточно освещён, есть много библиотек, одной из них является «PHP QR Code» – быстрый и легкий класс, рассмотрим его применение совместно с графической библиотекой…

Создание товарной накладной в PHPExcel

Пример, как сформировать товарную накладную с помощью библиотеки PHPExcel. В результате получится файл в формате xlsx…

Пример парсинга html-страницы на phpQuery

phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют…

Календарь jQuery UI Datepicker

DatePicker – хороший и функциональный плагин для выбора даты, легко настраивается и привязывается к стандартному полю ввода формы.

Таблица символов эмодзи

Полная таблица символов эмоджи и их HTML коды.

Источник

Маска ввода телефона на jQuery

Заказчики лэндингов часто просят сделать маску ввода телефона, желая таким образом задать определённый стандарт вводимых номеров клиентами. Для реализации поставленной задачи необходимо подключить библиотеку jQuery.

Поставьте следующий код перед закрывающимся тегом body:


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

Дальше вам надо скачать плагин с официальной его страницы: http://plugins.jquery.com/maskedinput/, в папку js и вставить код в HTML-файл после библиотеки jQuery:


<script src="js/jquery.maskedinput.min.js"></script>

Для быстроты создадим форму на Bootstrap, с полями ввода для имени и телефона, это такой стандартный вариант для лэндингов. Не забываем в шапку подключить ссылку на bootstrap.min.css.


<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
 <style>
  form {
   background-color: #f3f3f3;
   padding: 20px;
   margin: 20px;
   }
 </style>
</head>
<body>
 <div class="container">
  <div class="row">
   <div class="col-sm-4">
    <form action="" method="POST">
    <legend>Название формы</legend>
     <div class="form-group">
      <label >Ваше имя</label>
      <input type="text" class="form-control" name="name" placeholder="Имя">
     </div>
     <div class="form-group">
      <label >Ваш номер телефона</label>
      <input type="tel" class="form-control" id="phone" name="phone" placeholder="+7 (999) 99 99 999">
     </div>
    <button type="submit" class="btn btn-primary">Отправить</button>
    </form>
   </div>
  </div>
 </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/jquery.maskedinput.min.js"></script>
</body>
</html>

На скриншоте вы видите форму с маской для телефона, когда поле для ввода в фокусе. Это уже отрабатывает плагин jQuery Masked Input.

Маска ввода телефона на jQuery.

Инструкция по работе плагина

На GitHub есть подробная инструкция по работе плагина jQuery Masked Input. Между тегами <script>..</script> напишем простой и короткий код.

Первым делом пропишем стандартную форму


$(document).ready(function()

для того, чтобы скрипт начинал работать, только после того, как вся структура DOM всех элементов загрузилась и была готова. Находим на сайте функцию .mask, которая как раз и позволяет нам сделать определённую маску, используя которую, мы можем заставить пользователя, ввести нужную нам информацию.

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


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

Пропишем в input для телефона у нашей формы id=»phone», он должен совпадать с #phone в параметрах плагина. Затем указываем свою маску:


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

В итоге наш код будет таким:


<script>
    $(document).ready(function() {
    $("#phone").mask("+7 (999) 99-99-999");
  });
</script>

Теперь пользователь может вводить в поле для телефона только цифры, в определенном количестве и порядке. Для гибкой маски этот плагин не подойдет.

Посмотреть как работает маска при вводе телефона можете здесь:

Демо-пример

  • Создано 04.07.2018 10:19:56


  • Михаил Русаков

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

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

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

  1. Кнопка:

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

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

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

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

jQuery Mask Input Plugin

A jQuery plugin for applying a mask to an input (e.g., phone numbers, dates, et cetera).

jQuery Mask Input is licensed under the MIT license. Attribution is appreciated, though not required.

Demo

http://plnkr.co/edit/YJrNnr?p=preview

Usage

.maskInput(mask., [callbackBeforeInput], [callbackAfterInput] );

SIMPLE MASK

There are two types of masks you can pass to maskInput. The first is a simple string containing special mask characters. By default, these characters are as follows:

9: Any digit character
A: Any letter character
*: Any letter or digit character

Below is an example of a phone number mask.

<input id="phone" type="text" name="phone">

<script type="text/javascript">
	$('#phone').maskInput('(999) 999-9999');
</script>

Alternatively, a mask can be specified in the mask attribute of the input element.

<input id="phone" type="text" name="phone" mask="(999) 999-9999">

<script type="text/javascript">
	$('#phone').maskInput();
</script>

After the mask is applied, the placeholder attribute will be set to (___) ___-___.

COMPLEX MASK

If the simple character mask isn’t enough, you can specify your own complex mask. For example, if you wanted someone to enter their date of birth, you can be a little more restrictive about what characters you want to allow in specific parts of the mask. Take this example:

We could restrict the first M digit to be either a 0 or a 1. And the first D digit could be restricted to being 0-3. And the two YY digits could either be 1 or 2 and 9 or 0, respectively. This is what the mask argument would look like; an array of strings and RegEx patterns.

["MM: ", /[01]/, /d/, " DD: ", /[0-3]/, /d/, " YYYY: ", /[12]/, /[90]/, /d/, /d/];

Please note that the RegEx portions of the array can only apply to 1 character each. Putting it all together, it looks like this:

<input id="birthdate" type="text" name="birthdate">

<script type="text/javascript">
	$('#birthdate').maskInput(["MM: ", /[01]/, /d/, " DD: ", /[0-3]/, /d/, " YYYY: ", /[12]/, /[90]/, /d/, /d/]);
</script>

The unmasked value is set as the value of the «value-unmasked» attribute of the input. Validity of the current value can be accessed by using $('input').data('isUnmaskedValueValid'), which returns true or false.

CALLBACKS

Before Input — validating the data

If provided, the callback will be called and the following object will be passed as an argument:

{
	value: 'value without mask',
	maskedValue: 'value with mask',
	lastChar: 'last entered character',
	inputElement: 'jQuery input object'
}

After Input — callback after entering the character

If provided, the callback will be called and the following object will be passed as an argument:

{
	isValid: boolean,
	value: 'value without mask',
	maskedValue: 'value with mask',
	inputElement: 'jQuery input object'
}
Источник

На этом уроке с помощью плагина 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>
Создание HTML элементу input маски ввода телефона
Создание HTML элементу input маски ввода телефона

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

Если в качестве заполнителя Вы хотите использовать что-то другое, то его можно указать посредством параметра 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>
Использование различных заполнителей в масках ввода masked input
Использование различных заполнителей в масках ввода masked input

Кроме 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>
Демонстрация работы маски для ввода цвета CSS в шестандцатиричном формате
Демонстрация работы маски для ввода цвета CSS в шестандцатиричном формате

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

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

<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>
Демонстрация работы маски для ввода телефона в зависимости от выбранной страны
Демонстрация работы маски для ввода телефона в зависимости от выбранной страны

Источник

Данный плагин для jQuery позволяет автоматически подбирать подходящую маску ввода на основе введённого начала телефонного номера. Это позволяет сделать ввод номера телефона на странице web-cайта более быстрым и безошибочным. Кроме того, разработанный плагин может быть использован в других областях, если правила ввода возможно представить в виде нескольких масок ввода.

Введение

На web-сайтах очень требуется ввод информации о телефонном номере. Так сложилось, что каждая страна вправе устанавливать свои правила набора и длину номера, в результате чего между жителями разных стран периодически возникает путаница: одни привыкли указывать номер с ведущей цифрой 8, другие — с ведущей цифрой 0, а третьи — со знака +.

Обзор существующих решений

Чтобы как-то разрешить возникшую сложность и привести номера к единому формату встречаются 3 основных решения:

  1. Пользователю предлагается вводить номер с использованием маски ввода. Преимущество: наглядное отображение номера сводит к минимуму возможные ошибки в номере. Недостаток: в каждой стране принято своё написание и длина номера.
  2. Пользователю предлагается отдельно выбирать страну и отдельно вводить оставшуюся часть номера; возможно с применением маски ввода. Преимущество: возможность использования разных масок ввода для разных стран (а также регионов внутри страны). Недостатки: список стран (и регионов внутри каждой страны) может быть большим; номер телефона перестаёт существовать как единое целое (либо требуется предобработка перед сохранением и отображением номера).
  3. Поставить знак + перед номером (за пределами input) и разрешить только ввод цифр. Преимущества: простота реализации. Недостаток: отсутствие наглядного отображения номера.

Предлагаемое решение

В результате было решено доработать привычную маску ввода так, чтобы она менялась в соответствии с текущим значением номера. Кроме того, по мере ввода номера предлагается отображать название определившейся страны. Данный подход, субъективно, должен решить все недостатки перечисленных выше решений.

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

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

Программная реализация

В качестве ядра маски ввода была использована реализация jquery.inputmask, о которой многократно упоминалось на Хабрахабр. Данный плагин сейчас активно развивается и, к тому же, спроектирован таким образом, что для него достаточно просто писать расширения. Однако в данной задаче написать такое расширение оказалось практически невозможно. Я не стал дорабатывать или переписывать исходный плагин под свои нужды, т.к. его автор продолжает активную работу над расширением функционала, в результате чего применение моих правок может оказаться проблематичным. Поэтому мне пришлось написать плагин-надстройку над основным ядром, который отслеживает (плюс перехватывает) внешние воздействия и производит модификацию данных. Для того, чтобы внедрить свои обработчики внешних воздействий до обработчиков основного плагина использовался плагина-библиотека jquery.bind-first.

Сортировка разрешённых масок ввода

Для корректного выбора наиболее подходящей маски ввода весь набор масок требуется предварительно отсортировать специальным образом. При разработке правил сортировки были приняты следующие условности:

  1. Все символы в маске ввода разделены на 2 типа: значимые символы (в моём случае это символ #, означающий произвольную цифру, и цифры 0-9) и символы-декораторы (все остальные).
  2. Другое деление символов в маске ввода — это шаблонные символы (в моём случае это символ #) и все остальные.

В результате получились следующие правила сортировки в порядке их применения:

  1. При посимвольном сравнении 2 масок ввода во внимание принимаются только значимые символы (не декораторы).
  2. Разные шаблонные символы воспринимаются как равные, а остальные значимые символы сравниваются на основе их кода.
  3. Нешаблонные символы всегда меньше шаблонных и в результате располагаются выше.
  4. Чем короче длина значимых символов в маске ввода, тем маска ввода считается меньше и располагается выше.
Поиск подходящей маски ввода

При сравнении входного текста с очередной маской из отсортированного списка принимаются во внимание только значимые символы каждой маски. Если строка оказывается длиннее маски ввода, несмотря на то что все предшествующие символы прошли проверку, данная маска ввода считается неподходящей. В случае, если входному тексту удовлетворяет несколько масок ввода, то возвращается первая из них. Далее в найденной маске все значимые символы (в том числе нешаблонные) заменяются на шаблонный, который является комбинацией всех символов, разрешённых любым из шаблонных символов.

Обработка и перехват событий

С целью предотвращения конфликтов с обработчиками событий основного ядра маски ввода перехватываются следующие события:

  • keydown — отслеживаются нажатия клавиш Backspace и Delete — с целью изменения текущей маски ввода перед тем как основной обработчик удалит один символ из текста. Кроме того, отслеживается нажатие клавиши Insert, которая изменяет режим ввода текста, для синхронизации.
  • keypress — поскольку вводимый символ может быть неразрешён оригинальной маской ввода (т.к. все значимые символы в ней заменены на шаблонный), требуется проверить новую строку на удовлетворение одной из разрешённых масок. В случае, если таких масок нет, то ввод символа отбрасывается, иначе — производится обновление маски ввода, после чего событие передаётся обработчику ядра.
  • paste, input — вставка текста из буфера обмена. Перед передачей обработки ядру производится подбор маски ввода для строки, получившейся в результате вставки текста из буфера обмена. В случае, если маску ввода подобрать не удалось, производится посимвольное урезание текста с конца — до тех пор, пока текст не станет удовлетворять хотя бы одной маске ввода. Аналогичная операция производится при исправлении текста в поле ввода вызовом функции val(), а также при инициализации маски ввода, если она применяется к непустому полю ввода.
  • dragdrop, drop — обработка аналогична событию paste.
  • blur — дополнительная обработка на случай, если включен режим очистки текста при потере фокуса, если он не удовлетворяет маске ввода. Это событие перехватывается после основного обработчика, в отличие от предыдущих.

Все события навешиваются в пространстве inputmask. Это позволяет избежать некорректного поведения при вызове inputmask после инициализации надстройки (т.к. ядро при инициализации снимает все ранее установленные обработчики в пространстве inputmask).

Пример использования

Формат списка масок

Список масок представляет собой JavaScript-массив объектов, предпочтительно с одинаковым набором свойств. Как минимум одно свойство, которое содержит маску ввода, должно присутствовать у всех объектов массива. Имя параметра, содержащего маску, может быть произвольным. Ниже представлен фрагмент такого массива:

[
…
    { "mask": "+7(###)###-##-##", "cc": "RU", "name_en": "Russia", "desc_en": "", "name_ru": "Россия", "desc_ru": "" },
    { "mask": "+250(###)###-###", "cc": "RW", "name_en": "Rwanda", "desc_en": "", "name_ru": "Руанда", "desc_ru": "" },
    { "mask": "+966-5-####-####", "cc": "SA", "name_en": "Saudi Arabia ", "desc_en": "mobile", "name_ru": "Саудовская Аравия ", "desc_ru": "мобильные" },
    { "mask": "+966-#-###-####", "cc": "SA", "name_en": "Saudi Arabia", "desc_en": "", "name_ru": "Саудовская Аравия", "desc_ru": "" },
…
]
Параметры подключения плагина

До подключения требуется загрузить и отсортировать список масок. Это делается выполнением следующей функции:

$.masksSort = function(maskList, defs, match, key)

  • maskList — массив объектов, хранящих маски ввода (фрагмент объекта см. выше);
  • defs — массив шаблонных символов (в моём случае это символ #);
  • match — регулярное выражение, описывающее значимые символы (в моём случае это /[0-9]|#/);
  • key — имя параметра объекта массива, содержащего маску ввода.

При подключении плагину передаётся специальный объект, описывающий его работу. Данный объект содержит следующий набор параметров:

  • inputmask — объект, содержащий параметры, передаваемые основному плагину inputmask;
  • match — регулярное выражение, описывающее значимые символы, за исключением шаблонных;
  • replace — шаблонный символ, на который будут заменены все значимые символы; может отсутствовать в объекте definitions объекта inputmask;
  • list — массив объектов, описывающих маски ввода;
  • listKey — имя параметра внутри объекта, хранящего маску ввода;
  • onMaskChange — функция, которая вызывается при обновлении маски ввода; в качестве первого параметра передаётся объект из массива, маска ввода которого соответствует введённому тексту, а в качестве второго — точность определения маски: true — маска ввода соответствует полностью, false — для достоверного определения маски требуется ввод дополнительных символов.

Для инициализации плагина нужно применить метод inputmasks к полю ввода:

$.fn.inputmasks = function(maskOpts, mode)

  • maskOpts — объект, описывающий работу плагина;
  • mode — необязательный; в настоящий момент поддерживается значение isCompleted — в результате метод возвращает true, если текст, соответствующей подходящей маске, введён полностью и false в противном случае.
Пример подключения плагина

<input type="text" id="customer_phone" value="7" size="25"><br>
<input type="checkbox" id="phone_mask" checked>
<label id="descr" for="phone_mask">Маска ввода</label>
<script>
	var maskList = $.masksSort($.masksLoad("phone-codes.json"), ['#'], /[0-9]|#/, "mask");
	var maskOpts = {
		inputmask: {
			definitions: {
				'#': {
					validator: "[0-9]",
					cardinality: 1
				}
			},
			//clearIncomplete: true,
			showMaskOnHover: false,
			autoUnmask: true
		},
		match: /[0-9]/,
		replace: '#',
		list: maskList,
		listKey: "mask",
		onMaskChange: function(maskObj, completed) {
			if (completed) {
				var hint = maskObj.name_ru;
				if (maskObj.desc_ru && maskObj.desc_ru != "") {
					hint += " (" + maskObj.desc_ru + ")";
				}
				$("#descr").html(hint);
			} else {
				$("#descr").html("Маска ввода");
			}
			$(this).attr("placeholder", $(this).inputmask("getemptymask"));
		}
	};

	$('#phone_mask').change(function() {
		if ($('#phone_mask').is(':checked')) {
			$('#customer_phone').inputmasks(maskOpts);
		} else {
			$('#customer_phone').inputmask("+[####################]", maskOpts.inputmask)
			.attr("placeholder", $('#customer_phone').inputmask("getemptymask"));
			$("#descr").html("Маска ввода");
		}
	});

	$('#phone_mask').change();
</script>

Демонстрация

Пример демонстрации разработанного плагина представлен на странице проекта.

Источник

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

Одним из основных элементов для отправки данных с сайта является форма обратной связи. В поля формы можно вводить разные данные по маске: телефон, дату, серийные номера и др. Для создания маски существует специальный плагин 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)

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

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

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

Источник

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.

HTML

<!DOCTYPE html>

<html>

<head>

    <script src=

    </script>

    <script src=

    </script>

    <style>

        body {

            text-align: center;

        }

        h1 {

            color: green;

            font-size: 40px;

        }

        p {

            font-size: 30px;

            font-weight: bold;

        }

        div:not(:last-child) {

            margin-bottom: 2rem;

        }

    </style>

</head>

<body>

    <h1>GeeksForGeeks</h1>

    <p>jQuery - Input Mask Phone Number Validation</p>

    <form>

        <div>

            <label>Phone Number 1:</label>

            <input type="text" name="phone" 

                class="first-phone" 

                placeholder="(999)-999-9999" />

        </div>

        <div>

            <label>Phone Number 2:</label>

            <input type="text" name="phone" 

                class="second-phone" 

                placeholder="(99)-9999-9999" />

        </div>

        <div>

            <label>Phone Number 3:</label>

            <input type="text" name="phone" 

                class="third-phone" 

                placeholder="+99-9999999999" />

        </div>

    </form>

    <script type="text/javascript">

        $(document).ready(function () {

            $(".first-phone").inputmask("(999)-999-9999");

            $(".second-phone").inputmask("(99)-9999-9999");

            $(".third-phone").inputmask("+99-9999999999");

        });

    </script>

</body>

</html>

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.

HTML

<!DOCTYPE html>

<html>

<head>

    <script src=

    </script>

    <script src=

    </script>

    <style>

        body {

            text-align: center;

        }

        h1 {

            color: green;

            font-size: 40px;

        }

        p {

            font-size: 30px;

            font-weight: bold;

        }

        div:not(:last-child) {

            margin-bottom: 2rem;

        }

    </style>

</head>

<body>

    <h1>GeeksForGeeks</h1>

    <p>jQuery - Input Mask Phone Number Validation</p>

    <form>

        <div>

            <label>Phone Number 1:</label>

            <input type="text" name="phone" 

                class="first-phone" 

                placeholder="(99)-9999-9999" />

        </div>

        <div>

            <label>Phone Number 2:</label>

            <input type="text" name="phone" 

                class="second-phone" 

                placeholder="+99-9999999999" />

        </div>

        <div>

            <label>Phone Number 3:</label>

            <input type="text" name="phone" 

                class="third-phone" 

                placeholder="(999)-999-9999" />

        </div>

        <div>

            <label>Phone Number 4:</label>

            <input type="text" name="phone" 

                class="fourth-phone" 

                placeholder="+999-99-99-999999" />

        </div>

    </form>

    <script type="text/javascript">

        $(document).ready(function () {

            $(".first-phone").mask("(99)-9999-9999");

            $(".second-phone").mask("+99-9999999999");

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

            $(".fourth-phone").mask("+999-99-99-999999");

        });

    </script>

</body>

</html>

Output:

Источник

  • Маска для номера телефона input
  • Маска для лица номер 1
  • Маска для волос номера
  • Маска для ввода номера телефона
  • Маска ввода для телефона в access