Маска ввода для HTML элемента input
На этом уроке с помощью плагина masked input рассмотрим процесс создания различных масок ввода текстовым элементам формы.
Назначение плагина masked input
Плагин masked input предназначен для установления маски ввода элементу input с помощью кода JavaScript. Данный плагин для своего функционирования требует наличие подключённой библиотеки jQuery. Скачать плагин jquery.maskedinput.js
(jquery.maskedinput.min
) можно посредством следующей ссылки:
Подключение плагина
После того как Вы скачали этот плагин (файл 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>

Комментарии: 67
- Александр Мальцев2022-03-03 14:32:15Добрый день!
Пример скрипта для создания такой маски:
<input type="tel" name="phone" required> <script> [].forEach.call(document.querySelectorAll('input[type="tel"]'), function (input) { let keyCode; function mask(event) { event.keyCode && (keyCode = event.keyCode); let pos = this.selectionStart; if (pos < 3) event.preventDefault(); let matrix = '+972 (___) ___-___', 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); }); </script>
А какой плагин установить в библиотеку надо и в в страницу в раздел Head?
Подскажите, пожалуйста
Подскажите, пожалуйста, а как можно сделать в маске, чтобы joxi.ru/brRQYe0s7ejDOA
тут нельзя было вбить 8
К примеру, клиент кликает на инпут и не видит, что там маска, и начинает все равно с 8 вбивать
и получается, что +7 (892) 6-- — --
т.е. неверный номер в итоге.
Как это можно сделать?
window.addEventListener(«DOMContentLoaded», function() {
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 = ""
}
var input = document.querySelector("#tel1");
input.addEventListener(«input», mask, false);
input.addEventListener(«focus», mask, false);
input.addEventListener(«blur», mask, false);
input.addEventListener(«keydown», mask, false)
var input = document.querySelector("#tel2");
input.addEventListener(«input», mask, false);
input.addEventListener(«focus», mask, false);
input.addEventListener(«blur», mask, false);
input.addEventListener(«keydown», mask, false)
});
Id tel1 и tel2, если на странице 2 формы с input tel
- Николай2018-12-12 12:50:17Добрый день!
Попробовал ваш код, не работает, может где-то опечатка? - Александр Мальцев2018-12-15 06:17:26Пример маски от пользователя Ilya:
itchief.ru/examples/lab.php?topic=javascript&file=mask-phone - Dmitry2021-03-16 18:17:26Здравствуйте!
А можно ли Эту маску
itchief.ru/examples/lab.php?topic=javascript&file=mask-phone
Адаптировать к «разным» странам, по примеру в Вашей статье для разных стран(ru,ua,by)?
Спасибо. - Александр Мальцев2021-03-18 15:02:13Привет! Можно. Например, так: открыть пример.
Нужно так, чтобы куда ни поставил курсор он перемещался в начало поля.
Подскажите, как быть, если на странице множество полей ввода, которым надо задать ту же самую маску? Например, у меня формы генерятся с помощью цикла на PHP, их может быть сколько угодно. Если присвоить всем нужным инпутам один и тот же ИД, и в скрипте прописать, например
<script> $(function(){ $("#prihod").mask("99:99:99"); }); </script>то скрипт сработает только для первого такого инпута, а для остальных нет. Надеюсь, понятно объяснил вопрос :)
- spaceoberon2019-08-01 16:42:37В строке инпута указан id. На странице может быть только один id. В вашем случае их становится столько много, сколько раз повторяет эту конструкцию ваша форма.
Чтобы избежать этого, применяйте класс, который может быть применен сколько угодно раз на странице. Для этого замените id=«date» на class=«date». Как пример.
А в коде скрипта надо сделать замену:
вместо $("#date").mask(«99.99.9999», {placeholder: «дд.мм.гггг» });
надо написать $(".date").mask(«99.99.9999», {placeholder: «дд.мм.гггг» });
Вместо решетки (id) поставить точку (обращение к классу).
Сам класс в файле css описывать не нужно.
Все остальное остается точно таким же.
то-есть чтобы submit не происходил по клавише Enter если не completed&
Если ставить курс ввода в начало поля ввода, то вводимый номер телефона после третьего символа отображается в зеркальном отражение. Например, номер +79122405678 будет иметь вид +7 9128765042. Но при этом на виндуос все корректно.
Если курсор ввода ставим на андроиде в конце строки ввода, то все срабатывает корректно.
Кто сталкивался с такой проблемой и как ее решить?
- Александр Мальцев2017-05-24 15:22:38Плагин Masked Input имеет такую ошибку, и автор навряд ли её исправит, т.к. он забросил этот проект (он уже не обновлялся более 2 лет). Чтобы это исправить, надо править исходные коды.
Попробуйте использовать другой плагин для маски.
Переопределил:
$.mask.definitions['9'] = '';
$.mask.definitions['n'] = '[0-9]';
- Павел2017-12-20 16:09:04Спасибо, что написал решение!!!
Спас большую часть моего времени!
$("#phone").mask("+994(99) 999-99-99")
При вводе мы видим:
+__4(__) ___-__-__
- Armand2021-08-23 19:01:26не нашел ответа?) столкнулся с такой же проблемой.
- Olejonok2021-08-23 19:54:08Ой давно это было, посмотрел исходник:
$("#phone").mask("+994(YY)YYY-YY-YY");
Когда вводишь номер по маске $("#phone").mask('+7(999)999-99-99') при вводе 4 знака (первого после правой скобки), знак вводится, но курсор остаётся слева и так после каждого разделителя.
- Александр Мальцев2017-02-28 17:06:48Попробовал в Chrome, ничего такого не заметил. Наверно зависит от браузера.
- buble.gena2017-02-28 18:09:13Тоже такая проблема есть, наблюдается на ряде телефонов, например SAMSUNG GALAXY NOTE 4
- Max2017-02-28 22:55:41Воспроизводится
Chrome 55.0.2883.91
Android 7.0.0
Sony Z5
Воспроизводится
Chrome 56.0.2924.87
Android 6.0.1
Sony Z3
Не воспроизводится
Chrome 50.0.2661.89
Android 4.4.2
SAMSUNG Galaxy Tab 4 - Александр Мальцев2017-03-01 17:19:17Если критично, то попробуйте использовать другой плагин для маски: github.com/igorescobar/jQuery-Mask-Plugin
Подключение:
<script src="js/jquery.mask.min.js"></script>
Использование:
<input type="text" id="phone" name="phone" required="required"> <!-- Сценарий JavaScript --> <script> $(function() { $("#phone").mask("+7(000)000-00-00", { placeholder: "+7(___)___-__-__", clearIfNotMatch: true }); }); </script>
Не работает плагин, если элемент приехал через AJAX.
- Александр Мальцев2017-02-26 02:18:38В этом случае необходимо воспользоваться одним из следующих способов:
1. Запустить инициализацию maskedinput после добавления элемента в DOM:
$("#id").mask("8(999) 999-9999");
2. Вызвать при получении ответа (в ajax jquery — свойство success) собственное событие, например, as_complete:
$(document).trigger('as_complete');
Теперь можно будет очень просто инициализировать элемент, а именно в тот момент когда будет возникать событие as_complete:
$(document).on('as_complete', document, function() { $("#phone").mask("8(999) 999-9999"); });
- Max2017-02-26 03:35:39Спасибо!
Повесил событие на ajaxcomplited.
P.S.
Для мобильников в типе можно пользоваться тэгом tel, весьма удобный ввод становится.
- Александр Мальцев2017-02-18 01:53:25Нет, такую маску создать не получится. Можно реализовать маску для ввода 1 или 2 цифр.
$("#id").mask("9?9");
А потом просто проводить его валидацию:
$('#id').keyup(function(){ var value = $(this).val(); if (parseInt(value) >= 1 && parseInt(value) <= 30) { $(this).css('background-color','green'); } else { $(this).css('background-color','red'); } });
- Александр Мальцев2017-01-22 12:43:46Здравствуйте. Её можно указать, например, с помощью атрибута placeholder:
<input id="phone1" type="text" class="form-control" placeholder="8(___) ___-____">
- Александр Мальцев2016-12-11 12:12:11Если вы используете его в форме, то проверку перед отправкой можно выполнить разными путями. Например, добавить к нему атрибут
required="required"
и оставить его проверку самому браузеру. Либо написать для его валидации необходимый код на JavaScript.
Например, что-то такое:
if ($('#idэлемента').val().length!=10) { // вы ввели неправильное количество символов в элемент... }
спасибо
- Александр Мальцев2016-11-30 12:59:40Здравствуйте, вот ссылка на рабочий пример: yadi.sk/d/DIxQzr8kzqSX6
Пробовал «9?9.9999» — не подходит: если программно поместить в это поле подходящее число (например 8.225), то после клика мышкой по этому полю данное число само преобразуется в 82.25 :(
- Александр Мальцев2016-10-06 11:24:17Вам необходимо сделать 2 необязательные части. Одну слева (до точки) и одну справа (после точки). А этот плагин позволяет сделать только одну необязательную часть. Поэтому сделать с помощью masked input не получится.
Подскажите как возможно настроить поле для формы со следующим параметром:
Требуется вводить строго 8 цифр «99999999». Но вот количество таких наборов по 8 может быть много, из разряда:
99999999
99999999,99999999
99999999,99999999,99999999,99999999
Запятая должна ставиться сама если вводятся цифры дальше.
Спасибо.
- Александр Мальцев2016-10-06 10:51:16С помощью этого плагина jQuery этого не достигнуть.
и можно ли сделать чтоб маска была видна при фокусирование на элемент в последней версии плагина, и курсор вставал сразу после первой скобки, как в ранних версиях?
- Александр Мальцев2016-07-06 13:44:15Этот плалин (masked input) не позволяет изменять значения маски на лету. Необходимо посмотреть что-то другое…
- Александр Мальцев2016-07-06 13:49:06А что Вам мешает воспользоваться тем, как это сделано в примере 7. Т.е. (+994), (+1) и (+1234) в виде раскрывающего списка. А остальное значение в поле.
// Кнопка наверх $(document).ready(function(){ $(window).scroll(function () { if ($(this).scrollTop() > 50) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); // scroll body to 0px on click $('#back-to-top').click(function () { $('#back-to-top').tooltip('hide'); $('body,html').animate({ scrollTop: 0 }, 800); return false; }); $('#back-to-top').tooltip('show'); });
из за чего конфликт? Спасибо.
Как сделать так, чтобы курсор становился в начало маски автоматически? Очень важная фишка
- Александр Мальцев2016-05-31 12:34:22Маска нужна для того чтобы контролировать ввод, а не форматировать отображение. Это можно сделать с помощью события, которое срабатывает когда элемент теряет фокус. Например с помощью focusout или blur.
- Александр Мальцев2016-05-23 12:57:33Проверять свойство length на соответствие некоторому числу.
Получить значение length можно следующим образом:
$('#phone1').val().length
- Александр Мальцев2016-05-01 01:51:57
$.mask.definitions['d']='[0-5]'; $("#id").mask("4444-?ddddd");
- Даниил2016-05-05 18:30:15Спасибо!
- Cemeh2016-05-06 08:09:47$("#id").mask(«4444-?ddddd»);
Ограничить действие необязательных символов как-то можно?
Допустим после 0-5 необзятельных нужны обязательные
$("#id").mask(«4444-?ddddd!?-99»);
есть какой-нибудь модификатор (условно "!?") отменяющий действие необязательности символов?
т.е. после необязательных нужны "-" и два числа например. - Александр Мальцев2016-05-07 09:18:21Такой возможности нет.
Спасибо
- Александр Мальцев2016-04-17 09:05:06Здравствуйте.
С помощью плагина jquery.maskedinput.js это будет трудновато осуществить. Т.к. он не позволяет на лету изменять $.mask.definitions в зависимости от того какой символ Вы нажали.
Попробуйте _https://github.com/RobinHerbots/jquery.inputmask. Он вроде позволяет создавать динамические маски. Или как вариант, написать свою собственную маску.
Подскажите пожалуйста как сформировать маску для ввода времени, например:
с 00:00 по 00:00.
- Александр Мальцев2016-03-08 09:37:44Приветствую!
Например, так:
$(function(){ $.mask.definitions['H'] = "[0-2]"; $.mask.definitions['h'] = "[0-9]"; $.mask.definitions['M'] = "[0-5]"; $.mask.definitions['m'] = "[0-9]"; $("#id").mask("с Hh:Mm по Hh:Mm"); });
- Артем2016-03-08 10:55:02Александр, спасибо огромное за оперативный ответ!
Я так пробовал, такая мысль меня посетила, но проблема заключается в том, что у нас всего 23 часа, а после нашей маски доступно для ввода становиться 24, 25, 26, 27, 28, 29.
Может быть есть возможность указать интервал например с 0 по 23, для поля Hh. - Артем2016-03-08 12:21:16Если конкретного решения нету именно с использование маски, я придумал временное, но в целом рабочее решение :)
// Изменение поля "Время доставки" для значения "с чч" и "по чч" $('#cargoTimeByHDelivery, #cargoTimeToHDelivery').change(function() { // Идентификатор изменения var cargoTimeId = this.id; // Значение поля для часов var cargoTimeVal = this.value; if (cargoTimeVal > 23) { $('#'+cargoTimeId).val(23); } });
- Александр Мальцев2016-02-22 13:50:42Вам необходимо переопределить определения и использовать маску следующим образом:
$.mask.definitions['9'] = ''; $.mask.definitions['n'] = '[0-9]'; $(function(){ $("#phone").mask("8(937) nnn-nnnn"); });
- Александр2016-02-22 15:03:23Спасибо.
Нам нужна маска на форму геткурс, чтобы номер автоматом записывался +972 (999) 999-999
Мы пробуем по вашей инструкции, но у нас не получается.
Мы загрузили плагин в файловое хранилище геткурса, поставили скрипт в HEAD, установили скрипт в форме. Но форма при проверке исчезает и не дает даже проверить.
То есть что то не то
Заранее благодарю!