Как сделать маску номера телефона для всех форм (plugin Imask)

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

1
2
3
4
5

var element = document.getElementById('selector');
var maskOptions = {
  mask: '+{7}(000)000-00-00'
};
var mask = IMask(element, maskOptions);

И при этом все хорошо работает до тех пор, пока на станице не появится несколько форм и вы будете изо всех сил пытаться поставить маску номера телефона на остальные формы и сильно удивитесь почему ничего не выходит. Во-первых в качестве element там прописан некий элемент, у которого есть id. И по логике вещей, если установить там класс, который будет на странице повторяться, то сможем поставить маску номера телефона для всех форм на странице. Как бы не так. С Imask у вас такое не пройдет, если пользоваться официальной документацией. Но к счастью с этой проблемой можно справится, если немного модифицировать код из примера. И теперь он может выглядеть примерно так:

1
2
3
4
5
6
7
8

var phone = document.querySelectorAll('input[name="phone"]');
var maskOptions = {
	mask: '+7(000)000-00-00',
	lazy: false
};
for (var i = 0; i < phone.length; i++){
	var mask = new IMask(phone[i], maskOptions);
}

lazy: false означает, что маска номера телефона в форме будет видимой. Теперь мы можем установить несколько одинаковых и не очень форм на одной странице без опасения, что где-то что-то не будет работать должным образом. Пользуйтесь.

Демо