Готовая маска для телефона на jQuery

19.02.2022
Содержание:

В новой записи я вам покажу мою версию для маски телефона. Эта версия маски используется только для РФ телефонов начинающихся на +7. Маска ограничивает количество символов, переносит каретку в конец значения при нажатие на поле, фиксирует «+7(» в начале поля.

JavaScript код для создания маски телефона

/* фокусировка на пустом поле */
$('input[type="tel"]').on("focus", function() {
    let value = $(this).val()

	if(value.length < 1) {
		$(this).val("+7(")
	}
})

/* функция для перевода каретки */
function setPositionCaret(elemId, caretPos) {
	var el = elemId;

	if (el !== null) {
		
		if (el.createTextRange) {
			var range = el.createTextRange();
			range.move('character', caretPos);
			range.select();
			return true;
		}
		else {
			if (el.selectionStart || el.selectionStart === 0) {
				el.focus();
				el.setSelectionRange(caretPos, caretPos);
				return true;
			}
			else {
				el.focus();
				return false;
			}
		}
	}
}


/* событие фокусировки в поле */
$('input[type="tel"]').on("focus",function () {
	console.log("Фокус")
	setPositionCaret(this, $(this).val().length);
});
/* событие нажатие на кнопку мыши в поле */
$('input[type="tel"]').on("click",function () {
	console.log("Нажатие")
	setPositionCaret(this, $(this).val().length);
});
/* событие изменения содержимого в поле */
$('input[type="tel"]').on("change", function () {
	console.log("Нажатие")
	let value = $(this).val()
	$(this).val(value)
	setPositionCaret(this, $(this).val().length);
});


/* событие отпускания клавиши (ввод в поле) */
$('input[type="tel"]').on("keyup", function(e){	
	let value = $(this).val()

	if(e.code == "ArrowLeft" || e.code == "ArrowRight") {
		setPositionCaret(this, $(this).val().length);
	}

	if(value.length < 3) {
		$(this).val("+7(")
	}
	else if(e.code == "Backspace") {
		return true
	}
	else if(value.length >= 16) {
		return false
	}
	else {
		if(value.length == 16) {
			$(this).val(value)
		}

		if(value.length == 6) {
			$(this).val(value + ")")
		}

		if(value.length == 10 || value.length == 13) {
			$(this).val(value + "-")
		}
	}
	
})

/* событие нажатие на клавишу (ввод в поле) */
$('input[type="tel"]').on("keydown", function(e){	
	let value = $(this).val()

	if(e.code == "Backspace") {
		return true
	}
	else if(value.length >= 16) {
		return false
	}
	else {
		if(value.length == 16) {
			$(this).val(value)
		}

		if(value.length == 6) {
			$(this).val(value + ")")
		}

		if(value.length == 10 || value.length == 13) {
			$(this).val(value + "-")
		}
	}
	
})


/* событие фокусировки в поле */
$('input[type="tel"]').on("blur",function () {
	if($(this).val().length <= 3) {
		$(this).val("")
	}
});

Вторая версия кода для маски телефона

Это версия предназначена для тех кто использует плагин jquery.mask

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

<script>

	$(document).ready(function() {
		$("input[type='tel']").mask("+7 (999) 999-99-99");
	});

	/* функция для перевода каретки */
	function setPositionCaret(elemId, caretPos) {
		var el = elemId;

		if (el !== null) {
			
			if (el.createTextRange) {
				var range = el.createTextRange();
				range.move('character', caretPos);
				range.select();
				return true;
			}
			else {
				if (el.selectionStart || el.selectionStart === 0) {
					el.focus();
					el.setSelectionRange(caretPos, caretPos);
					return true;
				}
				else {
					el.focus();
					return false;
				}
			}
		}
	}

	/* событие фокусировки в поле */
	$('input[type="tel"]').on("focus",function () {
		console.log("Фокус")
		setPositionCaret(this, $(this).val().length);
	});
	/* событие нажатие на кнопку мыши в поле */
	$('input[type="tel"]').on("click",function () {
		console.log("Нажатие")
		setPositionCaret(this, $(this).val().length);
	});
	/* событие изменения содержимого в поле */
	$('input[type="tel"]').on("change", function () {
		console.log("Нажатие")
		let value = $(this).val()
		$(this).val(value)
		setPositionCaret(this, $(this).val().length);
	});


	/* фокусировка на пустом поле */
	$('input[type="tel"]').on("focus", function() {
		let value = $(this).val()

		if(value.length < 1) {
			$(this).val("+7(")
		}
	})

	/* событие отпускания клавиши (ввод в поле) */
	$('input[type="tel"]').on("keyup", function(e){	
		let value = $(this).val()

		if(e.code == "ArrowLeft" || e.code == "ArrowRight") {
			setPositionCaret(this, $(this).val().length);
		}

		if(value.length < 3) {
			$(this).val("+7(")
		}
	})

       $('input[type="tel"]').on("input", function(e){
		let newValue = $(this).val().replace(/^\+7\(8/, "+7(")
		$(this).val(newValue)
       })

</script>
На этом всё!
Больше интересных статей в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime
Наши планы
  • Написание материала для курса по разработке ботов на Telegram
  • Разработка универсального парсера на PHP

Поддержите мой сайт!

Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube