В новой записи я вам покажу мою версию для маски телефона. Эта версия маски используется только для РФ телефонов начинающихся на +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>
