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

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

Много вопросов было в комментариях как поправить "недуг", связанный с тем, что при клике по полю с номером телефона маска ввода срабатывала, но каретка, автоматически не переводилось в начало. Из-за этого бывали случаи, когда номер приходил некорректно и люди не могли дозвониться клиенту.

Если погуглить сейчас "Маску ввода номера телефона", то вы обязательно наткнетесь на Maskedinput, он действительно популярный. О нем была и моя статья, но как я понял, автор этого плагина не собирается решать проблему, поэтому я решил найти пару альтернатив, тем более многие из подписчиков просили об этом.

Imaskjs

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

Подключается с авторского CDN в одну строку, хотя исходный код доступен на Github. Есть возможность подключения в виде плагина для Vue, React, Angular и React Native. Поддерживает не только маску ввода номера, но и для других полей и типов данных.

Если подключать через CDN, то делается это так. Где-нибудь перед закрывающим тегом "body", подключите сам скрипт:

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

Затем необходимо его инициализировать. Например, так:

<script>
		let elements = document.getElementsByClassName('plugin__input_imaskjs');
			
		for (let i = 0; i < elements.length; i++) {
			new IMask(elements[i], {
				mask: '+{3}(000)000-00-00',
			});
		}

	</script>

imaskjs__input_tel - это класс ваше поля с телефоном, он может быть любым.

jQuery Mask Plugin

Еще один неплохой скрипт, который прекрасно решает свою задачу, но на этот раз выполнен в виде jQuery-плагина. Делает маски не только полей с номером телефона, но и маскирует многие другие типы в нужном формате. На сайте разработчика их около 20 штук. Там же есть ссылка и на репозиторий в Github.

Как и в прошлом варианте есть возможность подключения через CDN, но, если любите все контролировать у себя на сервере, то можете и скачать исходник.

Подключить к сайту можно так:

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

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>

	<script>
		$(function() {
			$('.plugin__input_jmp').mask('+7(000)000-00-00');
		});
	</script>

.jmp__input_tel - это класс поля, к которому применяется маска, он может быть любым

Вот, можете попробовать сами:

Посмотреть пример