|
как сделать маску телефона в 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 снова |
| Часовой пояс GMT +3, время: 07:38. |
|