Как реализовать маску ввода телефонного номера?

Друзья, подскажите, быть может, кто сможет проконсультировать...
В форме обратной связи, хочу сделать "маску ввода телефонного номера" (как точно она называется не знаю). Суть в том, что бы по умолчанию поля, как и сейчас показывались пустыми mikhai3o.bget.ru . НО кликнув на поле ввода номера, хочу что бы проявлялась форма ввода телефона вида: +7(___)___-__-__
Проблема в том, что у меня 10 форм обратной связи.
Я делал по примеру, описаному тут: www.howtomake.com.ua/front/jquery-mask-check-phone...
И столкнулся с проблемой: Данная штука работала только на первой форме, на остальных увы... Плюс ко всему перестали отправляться письма... Пришлось вернуть всё.
Скажите, есть ли надежный способ, реализовать задумку?
Спасибо.
  • Вопрос задан
  • 19495 просмотров
Пригласить эксперта
Ответы на вопрос 5
Raxen
@Raxen
Lead Frontend Developer, Beeline
alsopub
@alsopub
У вас на странице два поля ввода с одним именем.
Вы, вероятно, прикручивали маску через $('input[name=phone]') или как-то так, по-этому маска прицепилась только к первому полю.
Добавьте к полям, например, class="phonemasked" (класс не обязательно должен существовать в css) и привяжите маску через $('.phonemasked').each.
Кстати, во втором поле у вас присутствует код - required"" (лишние кавычки).
Ответ написан
madmaker
@madmaker
Full stack программист
+1 к первому посту.
https://github.com/madmaker/jquery.inputmask

Подключаете и используете один из методов:

$(document).ready(function(){
$(selector).inputmask("99-9999999"); //static mask
$(selector).inputmask({"mask": "(999) 999-9999"}); //specifying options
$(selector).inputmask("9-a{1,3}9{1,3}"); //mask with dynamic syntax
});
Ответ написан
@Eugeny1987
Работаю с HostCMS
digitalbush.com/projects/masked-input-plugin

$("input[type='tel']").mask("+7(999) 999-9999");
Ответ написан
Комментировать
@mUchenik Автор вопроса
Ни чего у меня не получилось... :(
Я уже пробовал описание как в этом уроке: https://www.youtube.com/watch?v=Ds8CX0yKbYs (вроде бы всё понятно, но не работает должным образом... Точнее вообще не работает :( Попытался разобраться с плагином: https://github.com/andr-04/inputmask-multi такая же петрушка... Видимо делаю что то не так, а что понятия не имею... По видеоуроку, я писал скрипт прям в index.html быть может вовсе не там писать надо? Или быть может в jsфайле надо что то менять.. код обработчика как то дорабатывать надо? Вот кстати и обработчик:
$(".forms").submit(function(){
		$.ajax({
			type:"POST",
			url:"mail.php",
			data:$(this).serialize()
		}
		).done(function(){
			alert("Спасибо за заявку! Специалист свяжется с вами в ближайшее время.");
		setTimeout(function(){
			$.magnificPopup.close();$(".forms").trigger("reset");
		}
		,1000);});
	return false;});

Вот так у меня реализованы инпуты:
<label><span>Ваше имя:</span>
<input type="text" name="name" required></label>

<label><span>Ваш телефон:</span>
<input type="$sitename" name="phone" required></label>

<label><span>Ваше имя:</span>
<input type="text" name="name" required></label>
<label><span>Ваш телефон:</span>
<input type="text" name="phone" required""></label>

<label><span>Ваше имя:</span>
<input type="text" name="name" required></label>
<label><span>Ваш телефон:</span>
<input type="text" name="phone" required></label>

Задавал им ID но зезультата увы не достиг :(
По видео уроку, такой код получился:
<script>
function clearVal (val, limit) {

	var clearVal = val.replase(/[^\d]+/g, '');
	if( newVal == '') {
			return false;
	}else{
			return newVal.substring(0, limit);
	}
}
function getResString (newVal) {
		var res = '';
		for(var i = 0; i < newVal.length; i++) {
				if( i == 3 ){
						res += ' ';
						res += newVal.charAt(i);
				}else if( i == 6 || i== 8) {
						res += '-';
						res += newVal.charAt(i);

				}else{
					res += newVal.charAt(i);
				}
		}

}

$(function(){
	$('#phone') .on ('input', function(){
			var val = $(this).val(),
					limit = 10;
			if( val =='' ) return;
			console.iog(val);

			var newVal = clearVal(val);
			if(!newVal) {
					${this} . val('');
					return;
			}
			var res = getResString(newVal);
			$(this).val(res);

	});


});	


</script>

Пожалуйста скажите, что сделать, что б всё заработало согласно моим хотелкам?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы