как сделать маску телефона в input c +7(___) без jQuery
на чистом javascript нашел только такую маску
<html>
<head>
<script type="text/javascript">
function mask(inputName, mask, evt) {
try {
var text = document.getElementById(inputName);
var value = text.value;
// If user pressed DEL or BACK SPACE, clean the value
try {
var e = (evt.which) ? evt.which : event.keyCode;
if ( e == 46 || e == 8 ) {
text.value = "";
return;
}
} catch (e1) {}
var literalPattern=/[0\*]/;
var numberPattern=/[0-9]/;
var newValue = "";
for (var vId = 0, mId = 0 ; mId < mask.length ; ) {
if (mId >= value.length)
break;
// Number expected but got a different value, store only the valid portion
if (mask[mId] == '0' && value[vId].match(numberPattern) == null) {
break;
}
// Found a literal
while (mask[mId].match(literalPattern) == null) {
if (value[vId] == mask[mId])
break;
newValue += mask[mId++];
}
newValue += value[vId++];
mId++;
}
text.value = newValue;
} catch(e) {}
}
</script>
</head>
<body>
<form id="form1">
<input type="text" id="zipCode" onkeyup="javascript:mask('zipCode', '+7(000)000-00-00', event);" value="+7(___)___-____" >
</form>
</html>
но нужно сделать так, чтобы скобки не пропадали, когда начинаешь вводить телефон и при очистке делитом скобки и подчеркивания тоже должны оставаться. Нужно обязательно без jQuery. |
Маска для телефона на js
sovsem-nub,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<input value="+7(___)___-____">
<script>
window.addEventListener("DOMContentLoaded", function() {
function setCursorPosition(pos, elem) {
elem.focus();
if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);
else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd("character", pos);
range.moveStart("character", pos);
range.select()
}
}
function mask(event) {
var matrix = this.defaultValue,
i = 0,
def = matrix.replace(/\D/g, ""),
val = this.value.replace(/\D/g, "");
def.length >= val.length && (val = def);
matrix = matrix.replace(/[_\d]/g, function(a) {
return val.charAt(i++) || "_"
});
this.value = matrix;
i = matrix.lastIndexOf(val.substr(-1));
i < matrix.length && matrix != this.defaultValue ? i++ : i = matrix.indexOf("_");
setCursorPosition(i, this)
}
var input = document.querySelector("input");
input.addEventListener("input", mask, false)
});
</script>
</body>
</html>
|
Крутотень, но я вот смотрю на колбеки и заказы в БД, как народ вводит - как хочет, так и вводит, кому как удобно и всем по-моему поссать на эти паттерны. Проблематика видимо в том, что когда у одного есть свистелка, ее надо прикрутить всем, а то видишь ли, опмтимизаторы набегут и все равно заставят. )))
|
Помогите, пожалуйста немного изменить этот скрипт. Очень нужно следующее: поле должно быть пустое, а при фокусе (когда установили курсор в поле) появлялось только +7, и именно после/за +7 был курсор. И после этого, набирая номер (именно при написании номера) автоматом подставлялись пробелы и скобки по такой комбинации: +7 (ххх) ххх хх хх
Огромное спасибо за помощь! |
LADYX,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<input value="" id="tel"> <input value="" > <input value="">
<script>
window.addEventListener("DOMContentLoaded", function() {
function setCursorPosition(pos, elem) {
elem.focus();
if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);
else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd("character", pos);
range.moveStart("character", pos);
range.select()
}
}
function mask(event) {
var matrix = "+7 (___) ___ ____",
i = 0,
def = matrix.replace(/\D/g, ""),
val = this.value.replace(/\D/g, "");
if (def.length >= val.length) val = def;
this.value = matrix.replace(/./g, function(a) {
return /[_\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? "" : a
});
if (event.type == "blur") {
if (this.value.length == 2) this.value = ""
} else setCursorPosition(this.value.length, this)
};
var input = document.querySelector("#tel");
input.addEventListener("input", mask, false);
input.addEventListener("focus", mask, false);
input.addEventListener("blur", mask, false);
});
</script>
</body>
</html>
|
рони,
Да, именно то, что надо. Огромнейшее вам спасибо!!! Удачи вам! |
рони,
заметил одну странность)) попробуйте набрать любой номер полностью. Например, вы набрали: +7 (111) 333 4444. Если продолжить набирать и нажать 4, то ничего не меняется, а если ввести любую другую цифру, то стирается всё или почти всё. |
LADYX,
смотрите пост №5 снова |
рони,
да, и простите пожалуйста, последний вопрос. У моего input-а для телефона id="tel". Значит, чтобы его привязать именно к этому полю, нужно изменить строку на:
var input = document.querySelector("#tel");
верно? Но если я так делаю, то тогда у меня остальные поля не активируются при фокусе. Что я делаю неправильно? |
LADYX,
добавил поля и id в первое поле, может вы рано скопировали, попробуйте обновить окно и снова сделать копию. смотрите пост №5 снова |
рони,
Да, всё работает как нужно. Огромнейшее вам спасибо!!! И удачи!!! |
рони,
я вас приветствую! Я здесь немного пошаманил со скриптом, и мне не получается только два момента. Помогите, пожалуйста, сделать так, чтобы невозможно было клавишами Delete и Backspace удалять семерку. И второй момент - когда номер уже полностью набран, то при вводе уже лишней цифры, она вводится и тут же удаляется. Спасибо вам!
window.addEventListener("DOMContentLoaded", function() {
function setCursorPosition(pos, elem) {
elem.focus();
if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);
else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd("character", pos);
range.moveStart("character", pos);
range.select()
}
}
var is_del = false;
var is_back = false;
function mask(event) {
var curent_position = -1;
if(event.type == "keyup"){
curent_position = this.selectionStart;
}
var matrix = "+7 (___) ___ ____",
i = 0,
def = matrix.replace(/\D/g, ""),
val = this.value.replace(/\D/g, "");
if (def.length >= val.length) val = def;
this.value = matrix.replace(/./g, function(a) {
return /[_\d]/.test(a) && i <= val.length ? val.charAt(i++) : i < val.length ? a : i++ == 6 && val.length == 4 && event.keyCode !=8 && event.keyCode !='' ? ")" : ""
});
is_back = is_del = false;
if(event.keyCode == 8) is_back = true;
else if(event.keyCode == 46) is_del = true;
if (event.type == "blur") {
if (this.value.length == 2) this.value = "";
} else if(curent_position != -1){
if(is_del || is_back){
setCursorPosition(curent_position, this);
}
} else if(event.type == "focus") setCursorPosition(this.value.length, this);
};
var input = document.querySelector("#tel");
input.addEventListener("focus", mask, false);
input.addEventListener("blur", mask, false);
input.addEventListener("keyup", mask, false);
});
<input type="text" id="tel"> |
рони,
всё равно семерка удаляется. И сейчас стало так, что удаляя одну цифру, удаляется сразу две, и при этом курсор перескакивает. |
LADYX,
убрал код |
LADYX,
теструйте
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<input value="" id="tel"> <input value="" > <input value="">
<script>
window.addEventListener("DOMContentLoaded", function() {
function setCursorPosition(pos, elem) {
elem.focus();
if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);
else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd("character", pos);
range.moveStart("character", pos);
range.select()
}
}
var len = 0;
function mask(event) {
var matrix = "+7 (___) ___ ____",
i = 0,
def = matrix.replace(/\D/g, ""),
val = this.value.replace(/\D/g, "");
if (def.length >= val.length) val = def;
this.value = matrix.replace(/[_\d]/g, function(a) {
return i < val.length ? val.charAt(i++) : a
});
i = this.value.indexOf("_");
if(val.length < len) i = this.value.lastIndexOf(val.substr(-1))+1;
if (i != -1) {
i < 5 && (i = 3);
this.value = this.value.slice(0,i);
}
if (event.type == "blur") {
if (this.value.length < 5) this.value = ""
} else setCursorPosition(this.value.length, this);
len = val.length;
};
var input = document.querySelector("#tel");
input.addEventListener("input", mask, false);
input.addEventListener("focus", mask, false);
input.addEventListener("blur", mask, false);
});
</script>
</body>
</html>
|
Цитата:
|
рони,
Цитата:
|
Цитата:
|
Цитата:
Однако семерку можно заменить любой другой цифрой. Достаточно нажать на поле, зажать клавишу с любой цифрой (чтобы поле заполнилось), нажать home и ввести любую другую цифру. |
Цитата:
|
рони,
Цитата:
|
LADYX,
в каком брузере это чудо происходит? |
рони,
да во всех, что у меня установлены: Opera 48.0, Firefox 56.0.1, IE11, Google 61.0.3163.100. И даже в Safari 5.1.7 Ну не буду же я вас обманывать. Зачем мне это, если мне напротив нужно сделать так, чтобы эта семерка- паразитка :) не удалялась |
Действительно, семерку можно удалить, если в поле введено от двух символов.
|
LADYX,
Nexus, заменить или удалить? заменить можно, если удалить то не понимаю как. |
Цитата:
|
Nexus,
на месте семёрки стала 1 - где удаление??? |
рони, фактически семерка была удалена.
Если говорить о позиции символа, то позиция очищена не была, согласен. |
Nexus,
может свой алгоритм предложите? |
рони, если только вечером, после 7.
"На коленке" реализовать у меня не получится. |
LADYX,
Nexus, протестируйте этот вариант, разрешены Backspace и цифры
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<input value="" id="tel"> <input value="" > <input value="">
<script>
window.addEventListener("DOMContentLoaded", function() {
function setCursorPosition(pos, elem) {
elem.focus();
if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);
else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd("character", pos);
range.moveStart("character", pos);
range.select()
}
}
function mask(event) {
if (this.selectionStart < 3) event.preventDefault();
var matrix = "+7 (___) ___ ____",
i = 0,
def = matrix.replace(/\D/g, ""),
val = this.value.replace(/\D/g, "");
if (def.length >= val.length) val = def;
this.value = matrix.replace(/[_\d]/g, function(a) {
return i < val.length ? val.charAt(i++) : a
});
i = this.value.indexOf("_");
if(event.keyCode == 8) i = this.value.lastIndexOf(val.substr(-1))+1;
if (i != -1) {
i < 5 && (i = 3);
this.value = this.value.slice(0,i);
}
if (event.type == "blur") {
if (this.value.length < 5) this.value = ""
} else setCursorPosition(this.value.length, this);
};
var input = document.querySelector("#tel");
input.addEventListener("input", mask, false);
input.addEventListener("focus", mask, false);
input.addEventListener("blur", mask, false);
input.addEventListener("keydown", mask, false);
});
</script>
</body>
</html>
|
рони,
да, вот как в этом, последнем вашем варианте, "+7" невозможно не удалить, не заменить, т.е. для "+7" не должны быть доступны: стрелки "налево" и "направо" и клавиши Delete и Backspace. А для любой цифры из набора "(111) 222 3333" напротив - разрешить и стрелки "налево" и "направо", и клавиши Delete и Backspace. Вот так можно сделать? Извините, пожалуйста, наверное уже задергали вас :) |
LADYX,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<input value="" id="tel"> <input value="" > <input value="">
<script>
window.addEventListener("DOMContentLoaded", function() {
var keyCode;
function mask(event) {
event.keyCode && (keyCode = event.keyCode);
var pos = this.selectionStart;
if (pos < 3) event.preventDefault();
var matrix = "+7 (___) ___ ____",
i = 0,
def = matrix.replace(/\D/g, ""),
val = this.value.replace(/\D/g, ""),
new_value = matrix.replace(/[_\d]/g, function(a) {
return i < val.length ? val.charAt(i++) || def.charAt(i) : a
});
i = new_value.indexOf("_");
if (i != -1) {
i < 5 && (i = 3);
new_value = new_value.slice(0, i)
}
var reg = matrix.substr(0, this.value.length).replace(/_+/g,
function(a) {
return "\\d{1," + a.length + "}"
}).replace(/[+()]/g, "\\$&");
reg = new RegExp("^" + reg + "$");
if (!reg.test(this.value) || this.value.length < 5 || keyCode > 47 && keyCode < 58) this.value = new_value;
if (event.type == "blur" && this.value.length < 5) this.value = ""
}
var input = document.querySelector("#tel");
input.addEventListener("input", mask, false);
input.addEventListener("focus", mask, false);
input.addEventListener("blur", mask, false);
input.addEventListener("keydown", mask, false)
});
</script>
</body>
</html>
|
Я таки ничего и не написал.
|
рони,
да, теперь семерка не удаляется. Но ругайте меня, бейте, кидайтесь в меня тапками и чем угодно :) Но наберусь наглости (но не подумайте, что я наглец), и попрошу еще пару штрихов, и тогда будет просто всё супер идеально. Представим, что набрали номер, например, (950) 222 3333, и нужно изменить девятку. И если клавишей "налево" нажать, держа ее пока курсор добежит до девятки, и если немного передержали и курсор остановился после семерки, то курсор "залипает" рядом с этой семеркой, и приходится мышкой устанавливать курсор в нужное место. Последние четыре цифры (троечки) если удаляем, то курсор остается на месте удаления, что хорошо. Если удаляем/правим другие цифры номера (двоечки или 950), то курсор перепрыгивает в конец. Сейчас когда набираем 950, потом набираем 2 (т.е. четвертую цифру) и появляется закрывающая скобка. А можно сделать так, чтобы при наборе 0 (т.е. третьей цифры) сразу появлялась закрывающая скобка? рони, простите за мою наглость совсем, правда, не наглого человека. :) я действительно очень вам благодарен. |
LADYX, вам принципиально, чтобы скрипт был на нативном js?
«jQuery Mask Plugin» смотрели? |
Nexus,
Цитата:
Цитата:
Да и что самое главное, считаю, раз уже взялись за этот скрипт, желательно довести его до кондиции, и не уважительно будет по отношению к рони его бросить. |
LADYX,
далее сами |
рони,
сам не сделаю. В любом случае вам огромное спасибо! |
Зачем три input ?
|
| Часовой пояс GMT +3, время: 21:22. |