Подбор маски ввода по телефонному номеру

Данный плагин для 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>


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


Пример демонстрации разработанного плагина представлен на странице проекта.
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 56

    0
    В последнее время стало актуальным использование масок. Ваш плагин отлично справляется, будем пользовать. Спасибо!
      +4
      Сразу ошибка при первой попытке ввести телефон г. Брянска с кодом 4832



      Остаюсь при мнении, что в случае, если номер телефона обрабатывает человек, то маски не нужны вовсе.
        0
        Хотя, сам по себе плагин интересен. Обязательно покажу своим программистам!
          0
          В первоначальном наборе ставилась цель правильно определять по номеру телефона страну и подходящую маску — чтобы не возникло ситуации, что номер не вмещается или, наоборот, остались пустые позиции.

          На настоящий момент деление по городам России не произведено, однако данная возможность заложена в плагин — нужно лишь расширить список масок… Это вопрос времени.
            +1
            Если сделаете список масок городов России — будет очень здорово! Я что-то так и не смог найти сколько-нибудь адекватного.
            0
            Сделано. Вроде, даже, не тормозит. :)

            Сведения брал отсюда. Но, как оказалось, они местами устарели. Я вручную пробежался по крупным городам и поправил неточности.

            Страницу проекта обновил — можно проверять прямо там.
              +1
              Берите данные из первоисточника
              www.rossvyaz.ru/activity/num_resurs/registerNum/
                0
                Да, это правильнее. Первоисточником пока не воспользовался из-за того, что не придумал как его обрабатывать. Кроме того, первоисточник не содержит сведений о длине кода региона (все коды ABC и DEF трёхсимвольные) — соответственно, не решает проблемы, обозначенной freextraz. Если делать серьёзную обработку на основе комбинаций диапазонов — тоже возможны проблемы. Конкретный пример — г.Челябинск, который перешёл на 7-значную нумерацию — из первоисточника это не следует.
                  0
                  По длине все просто — длина телефонного номера в РФ всегда фиксирована
                  Номер определяется маской +7 XXX YYY-YY-YY где +7 — код страны, XXX — код региона, YYY-YY-YY номер абонента.
                  А какие проблемы по Челябинску. По мне там все просто.
                    0
                    В качестве XXX очень часто привычнее видеть XXXX — т.е. 4 цифры и более в скобках, вместо 3-х, в зависимости от размера населённого пункта. Поэтому придётся анализировать данные более детально, а именно — все диапазоны, пытаться их объединить и т.д.

                    Есть надежда, что выгрузку можно переконвертировать, объединяя диапазоны и анализируя населённый пункт. Но избыточность базы может выйти боком — из-за присутствия районов и мелких диапазонов придётся вводить несколько записей для 1 диапазона. Потом в автоматизированном режиме пытаться объединить полученные маски (либо сначала объединить диапазоны, а потом маски — разницы нет).

                    Ладно, надо сначала попробовать. Как будет время — попробую.
                      0
                      По мне — это бесполезно.

                      Потому как.
                      Представим любой маленький населенный пункт.
                      Нумерация внутри — 3 цифры телефонного номера. Их набирают чтобы позвонить «по городу». Там так привыкли. Но! Официальный городской номер это еще 3 цифры, которые стоят перед этим 3-х значным номером, и по нему также можно позвонить. Соот-но код города — 4-рех значный.

                      В итоге, что я хочу сказать. Я бы, на вашем месте, сконцентрировался на представлении номеров в международном формате, которые начинаются на +. А все остальное — уж очень специфично и зависит от страны и населенного пункта. Дайте программисту возможность самому изменить эту логику в вашем приложении.

                      P.S.: Я не критикую, я искренне хочу помочь. Сам несколько завязан на телефонные номера — нахлебался.
                        0
                        Да, возможность как раз и заложена в плагине. Более того — в данной постановке и населённый пункт определять не требуется (чтобы показать правильную маску) и для этого уже подойдёт текущая реализация.
                0
                Тогда уж и с сотовыми можно сделать «из коробки», хотя бы по +79xx
                  0
                  Я думал над этим, но нужно понимать, что для определения маски ввода (а не региона или оператора) по номеру, как заявлено в теме, этого не требуется. Да, это было бы круто, но это немного другая задача и правильнее решается по-другому.
              0
              Да даже автоматом. Что мешает дать человеку ввести номер в том виде, каком он хочет, а затем преобразовать в нужный формат?
                0
                А зачем его преобразовывать в нужный формат после ввода? Обработке это не поможет. Пользователю — в случае ошибки неудобно будет её исправлять, либо мы придём к тому что есть — форматировать номер в процессе исправления (читай — ввода).
                  0
                  Чтобы привести к единому формату для дальнейшей обработки и представления.

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

                  — вводим полностью свой номер, ошибаясь в одной цифре
                  — ставим курсор перед ошибочной цифрой
                  — нажимаем цифру и… ничего не происходит

                  Второй:

                  — мы еще не ввели номер и видим: +7(___)___-__-__
                  — хм… у меня же номер 8-904…
                  — ставим курсор перед 7 (перед плюсом не дает)
                  — нажимаем 8… опять ничего

                  В итоге, зачем эти сложности лишние по борьбе с ветряной мельницей?
                    0
                    — вводим полностью свой номер, ошибаясь в одной цифре
                    — ставим курсор перед ошибочной цифрой
                    — нажимаем цифру и… ничего не происходит

                    Перечитывая комментарии, вспомнил ещё про один режим работы основного плагина — режим замены. Если нажать Insert, то станет активен режим исправления написанного. Кроме того, этот режим можно инициализировать по умолчанию, указав параметр insertMode: false внутри параметра inputmask.
                      0
                      Это очень хорошо. Часть проблемы должно снять минимум.
              0
              Скроллер поправь, Панченко ругается! :)
                0
                +1 (858) XXX-XXXX — США (Калифорния) а не Канада.
                  0
                  Аналогично и +1(925)273-6263 — тоже США. Проблемы у БД плагина с США, похоже…
                    0
                    Есть такая проблема. Насколько мне удалось узнать, в США и Канаде используется одинаковый код страны — +1. Поскольку деления по штатам в БД не заносилось (пока), для Канады и США временно указана одинаковая маска — +1(###)###-####.

                    НО, что более важно, одинаковые маски ввода привели к разным результатам в разных браузерах! Для меня основным пока остаётся Google Chrome — так у меня указанные номера распознаются как США (соответственно, Канада не отображаестся никогда). Когда проверил эти примеры в Mozilla Firefox — получил ровно противоположный результат, о котором написали выше.

                    Разумеется, это не является ошибкой плагина — причина в разной реализации сортировки в разных браузерах (т.к. список масок предварительно сортируется дополнительной функцией — см. описание). Я внесу коррективы в список масок по Канаде и США — тогда проблема будет устранена.
                      0
                      Ну так можно же в БД для +1 так и написать — «США и Канада». В США один из самых больших интернетов, и, имея неточности в БД в этом месте, вы резко ограничиваете популярность плагина. Меня остановило от его немедленного использования только это, например (хотя я и понимаю, что руками могу сам поправить, но осадочек остался).
                    0
                    А что на счет тех, кто
                    привыкли указывать номер с ведущей цифрой 8

                    Номера вида 8(831) ххх-хх-хх, 8(495) ххх-хх-хх все еще актуальны в России.
                      0
                      Если речь о международном формате, то правило написания едино. А так — ещё можно вспомнить про 8-53, 8-58, 8-55 и 8-10. Кроме того, если говорить о других странах, во многих странах 0 — выход на межгород, 00 — международная связь. Это проблема, как её решать — пока не знаю…
                      0
                      Плагин навязывает свой подход к делению номера на группы, что может не подходить некоторым пользователям в силу особенностей субъективного восприятия или даже просто из-за самого формата номера.

                      Пример: если у пользователя номер 2222789, то скорее всего он запоминает его как 22-22-789, а не 222-27-89. Соответственно при этом подходе к запоминанию такая форма будет только мешать вводу и восприятию.
                        0
                        Доля истины в этом, конечно есть, и многие очень любят выделять подряд идущие (или одинаковые) цифры в отдельные группы — для более удобного запоминания. Кстати, это можно было бы предусмотреть в плагине, но я старался решать задачу в общем виде — в виде перечисления разрешённого списка масок, поэтому описанная проблема осталась за кадром. Стоит решать данную проблему или нет — пока не знаю.

                        На странице демонстрации проекта я умышленно добавил флажок «Ввод без маски». Думаю, имеет смысл рекомендовать так поступать всем — ведь ситуации, действительно, бывают самые разные и кому-то предложенная маска может мешать.
                        +4
                        Умники! Что вы докопались до человека? Правильность набора номеров — прерогатива программиста. А вам предоставили инструмент. Пользуйтесь и настраивайте как хотите, а не умничайте где правильный номер, а где нет.
                          +1
                          Автор правильно рассмотрел нестандартные события (обычно такую вещь ограничивают onchange или keydown). Но парочки не хватает. Кроме вот этих нестандартный, но предложенных автором событий:

                          — input для Gecko (+WebKit и Opera)
                          This event is sent when a user enters text in a textbox. This event is only called when the text displayed would change, thus it is not called when the user presses non-displayable keys.

                          XUL

                          — dragdrop (Gecko)

                          — paste (WebKit)

                          Предлагаю рассмотреть остальные варианты:

                          — DOMSubtreeModified (WebKit)

                          — DOMControlValueChanged для Opera.

                          — IE поддерживает нестандартное событие onpropertychange
                          The onpropertychange event fires when properties of an object, expando, or style sub-object change. <…> When the onpropertychange event fires, the srcElement property of the event object is set to the object whose property has changed

                          msdn

                          — DOMCharacterDataModified (W3C).

                          Резюмируя:
                          — Gecko only suppports 'input' (XUL)
                          — WebKit: 'input', parentNode.'DOMSubtreeModified', 'paste'
                          — IE: onpropertychange
                          — Opera: DOMControlValueChanged, input
                            0
                            Номера с кодами зон на 9xx вообще нельзя набрать в «Города России». Почему?
                              0
                              По мобильным операторам данные пока не собирались. Мобильные не вводятся потому что не добавлена соответствующая маска, а компонент не разрешает ввод того что не разрешено. Это не является ошибкой — позже будет добавлено, скорее всего также будет добавлен тип номера — мобильный или стационарный (т.к. список дополнительных параметров номеров разного типа тоже отличается).
                                0
                                Если в одном поле можно будет ввести как мобильный, так и стационарный без переключения флагов плагин станет идеальным.
                              0
                              +380 44 555-55-55 — что-то не то выходит. И как то каждый раз по разному, не всегда дает писать, например там где я знаю что нужно поставить пробел как у нас принято, или короткое тире между группами символов.

                              Мне кажется это запарит обычных пользователей. Вот как в айфоне нужно обратить внимание — пишешь как можешь а оно старается красиво соструктурировать, а тут не дает.
                                0
                                Честно — сложно было собрать информацию о привычном отображении номера внутри каждой страны. Я заметил, что мало где используются скобки и дефисы — чаще пробелы. Но чтобы использовались одновременно пробелы и дефисы — такого не встречал нигде.

                                Здесь, по сути, маска тоже старается красиво структурировать. Единственное — у каждого свои привычки и понятие вкуса, поэтому может получаться несовсем то что ожидаешь.

                                Приведённый Вами пример отображается как +380-44-555-5555. Правильно ли я понимаю, что предлагается сделать отображение в виде +380 44 555 55 55?
                                  +1
                                  У нас пишут по разному, и в правду стандарта особо нет. Я вижу часто так:

                                  +38 (044) 555-55-55
                                  (044) 555-55-55
                                  0 (44) 555-55-55

                                  Да ладно, все равно супер :-) Я просто про то что когда человек начинает писать так как он привык система не кушает, это может для многих вызвать нервы.
                                    0
                                    так правильно именно +380. +38 это бывший код Югославии распавшейся на +381 +382 +385 +386 +387 +389. Украинский +380 появился позднее.
                                0
                                Друзья, хочу обратить ваше внимание на то, что применение плагина не ограничивается телефонными номерами. Я старался решить задачу в общем виде, поэтому данный плагин может использоваться, например, при вводе данных документа, удостоверяющего личность, регистрационного номера транспортного средства и т.д. Список масок ввода для различных областей, при возникновении в этом потребности, будет пополняться. Pull request'ы приветствуются :).
                                  0
                                  Добавлена информация по США и Канаде, скорректированы маски ввода по Белоруссии, Украине, Казахстану и Казани. Для мобильных определение оператора по коду делать не стал — нетривиальная эта задача и слишком избыточный набор масок получается. Маски ввода для этой цели плохо подходят — пока что для мобильных в демо добавил общую заглушку. А с учётом намечающейся отмены привязки к оператору данная задача вообще отпадает.
                                    0
                                    Уже начили использовать!
                                    Может быть обединить с google api или чемто подобным briancray.com/posts/find-web-visitors-location-javascript-google-api/
                                    И при первой загрузке выбирать текушею страну (телефоный код страны)
                                    Как идея? :)
                                      +1
                                      Здорово! :)

                                      Касательно выбора текущей страны (а ещё лучше и языка подсказок) — думаю, данный функционал рациональнее реализовать вне плагина. Т.е. при инициализации плагина выполнять определение и инициализировать соответствующим образом плагин.

                                      Идея, безусловно, неплохая и достойна внимания. Попробуйте реализовать и я включу это в примеры использования плагина.
                                        0
                                        Да такой пример было бы мега удобен, чтобы делать поля в формах для телефонов чемто похожие на Google
                                        accounts.google.com/SignUp?hl=ru
                                      –1
                                      Круто! Плагин хорош, но почему нельзя убрать "+" и поставить «8»?
                                        0
                                        Если Вы за то, чтобы вводить 8 — никто Вам не запрещает исправить список масок ввода. Однако в таком случае Вы сосредотачиваетесь только на России и я очень часто видел, что 8 вообще в таком случае опускают, оставляя маску (___)___-__-__.

                                        В настоящий момент сделать нестираемую цифру 8, к сожалению, не получится — такова особенность реализации. Это будет возможно сделать когда появится реальная потребность.
                                          0
                                          речь о том, чтобы она была стираемой, чтобы пользователь мог при желании ввести +7 и 8
                                            0
                                            А как в таком случае отличить 8 в качестве выхода на межгород от +8 в качестве первой цифры кода страны?

                                            Если организовать список масок, продублировав каждую с 8 и +7, возможно это будет решением Вашей задачи. Но из-за описанной выше неоднозначности возможно некорректное поведение в ряде случаев. Попробуйте.

                                            С другой стороны, непонятен смысл такого решения. Да, пользователям вводить будет удобнее, но будет ли Вам удобно потом обрабатывать то что ввели таким образом пользователи? На мой взгляд, если у вас аудитория только из России, то разрешать ввод и +7, и 8 не имеет смысла.
                                        0
                                        Плагин отличный, только не работает в IE8.
                                        Проблема в отсутствии поддержки в этом «замечательном» браузере встроенной функции Object.keys();
                                          0
                                          Плагин доработан. Теперь плагин работает начиная с IE7.
                                          0
                                          Плагин действительно отличный, намного удобнее чем другие реализации, но есть один недочет:

                                          одни привыкли указывать номер с ведущей цифрой 8

                                          Что-то демо-версия плагина таких привыкших не особо любит, начинаешь набирать и сразу в корею или японию отсылает.
                                          Может быть сделать чтобы при наличии первой цифры 8 подставлялось +7 и Россия?
                                          Попробуйте например вставить мегафоновский номер через буфер туда: 89201234567 — от него останется только +81 и всё. Сможете это как-то поправить?
                                            0
                                            В fork'е кто-то (может, Вы?) такое уже предложили. Однако мне потребуется доработать предлагаемое решение, чтобы это не выглядело как хардкод, чтобы использование плагина не было слишком заточено под телефонные номера и оставалась возможность его использования НЕ только по назначению (для телефонных номеров).

                                            Думаю, этот недочёт удастся решить путём предопределения списка замен на уровне регулярок. Вероятно же, что позже появится предложение 00 заменять на + :-). Да и, в зависимости от страны, замену 0 на +код появится возможность сделать (зависит от страны).
                                              0
                                              К сожалению не я ;) А можете дать ссылку на этот форк? Пока в вашей версии это не реализовано — хотя бы форк поиспользую ;)

                                              И ещё предложение появилось — создать массив, который содержит только страны России и СНГ + города России — это будет полезно для магазинов, которые преимущественно продают в России, но иногда получают заказы из СНГ, как например мой магазин ;)

                                              Сейчас из готовых файлов есть только города россии или только страны. Для себя решил это дополнив массив phones-ru.json строками:
                                              	{ "mask": "+374(###)###-###", "region": "Армения", "city": "", "operator": "", "desc": "" },
                                              	{ "mask": "+994(###)###-###", "region": "Азербайджан", "city": "", "operator": "", "desc": "" },
                                              	{ "mask": "+995(###)###-###", "region": "Грузия", "city": "", "operator": "", "desc": "" },
                                              	{ "mask": "+375(###)###-###", "region": "Беларусь", "city": "", "operator": "", "desc": "" },
                                              	{ "mask": "+380(###)###-###", "region": "Украина", "city": "", "operator": "", "desc": "" },
                                              	{ "mask": "+371(###)###-###", "region": "Латвия", "city": "", "operator": "", "desc": "" },
                                              	{ "mask": "+370(###)###-###", "region": "Литва", "city": "", "operator": "", "desc": "" },
                                              	{ "mask": "+373(###)###-###", "region": "Молдова", "city": "", "operator": "", "desc": "" },
                                              	{ "mask": "+996(###)###-###", "region": "Киргизия", "city": "", "operator": "", "desc": "" },
                                              	{ "mask": "+993(###)###-###", "region": "Туркмения", "city": "", "operator": "", "desc": "" },
                                              	{ "mask": "+372(###)###-###", "region": "Эстония", "city": "", "operator": "", "desc": "" },
                                              	{ "mask": "+998(###)###-###", "region": "Узбекистан", "city": "", "operator": "", "desc": "" }
                                              

                                              Может ещё кому пригодится.
                                                0
                                                Форк нашёл, при вставке из буфера он действительно работает, но при наборе не дает ввести цифру 8, я думаю это введет в ступор «особо одаренных» пользователей, поэтому решил данную проблему спец. маской:
                                                        { "mask": "8(9##)###-##-##", "type": "mobile" },
                                                
                                              0
                                              А можно ли как-то сделать отложенную загрузку файла phones-ru.json? Он занимает порядка 326 кб, а нужен только в случае когда пользователь начинает набирать номер?

                                              Не хотелось бы при каждой загрузке страницы тягать на комп клиента и парсить такой большой файл…
                                                0
                                                Проблему может частично решить сокращенный файл только с областями России, я думаю раз в 10 сократит объем файла такое объединение.

                                                Или другой вариант — парсить строку на этапе ввода, но тут уже без серверной части (на php или ещё чем-либо) не обойдёшься наверно.

                                              Only users with full accounts can post comments. Log in, please.