11.10.2017, 17:08
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,132
|
|
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>
|
|
11.10.2017, 17:42
|
 |
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
рони,
да, вот как в этом, последнем вашем варианте, "+7" невозможно не удалить, не заменить, т.е. для "+7" не должны быть доступны: стрелки "налево" и "направо" и клавиши Delete и Backspace.
А для любой цифры из набора "(111) 222 3333" напротив - разрешить и стрелки "налево" и "направо", и клавиши Delete и Backspace.
Вот так можно сделать?
Извините, пожалуйста, наверное уже задергали вас 
|
|
11.10.2017, 22:15
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,132
|
|
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>
|
|
12.10.2017, 10:17
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,799
|
|
|
Я таки ничего и не написал.
|
|
12.10.2017, 12:15
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
рони,
да, теперь семерка не удаляется. Но ругайте меня, бейте, кидайтесь в меня тапками и чем угодно Но наберусь наглости (но не подумайте, что я наглец), и попрошу еще пару штрихов, и тогда будет просто всё супер идеально.
Представим, что набрали номер, например, (950) 222 3333, и нужно изменить девятку. И если клавишей "налево" нажать, держа ее пока курсор добежит до девятки, и если немного передержали и курсор остановился после семерки, то курсор "залипает" рядом с этой семеркой, и приходится мышкой устанавливать курсор в нужное место.
Последние четыре цифры (троечки) если удаляем, то курсор остается на месте удаления, что хорошо. Если удаляем/правим другие цифры номера (двоечки или 950), то курсор перепрыгивает в конец.
Сейчас когда набираем 950, потом набираем 2 (т.е. четвертую цифру) и появляется закрывающая скобка. А можно сделать так, чтобы при наборе 0 (т.е. третьей цифры) сразу появлялась закрывающая скобка?
рони,
простите за мою наглость совсем, правда, не наглого человека. я действительно очень вам благодарен.
|
|
12.10.2017, 12:25
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,799
|
|
|
LADYX, вам принципиально, чтобы скрипт был на нативном js?
«jQuery Mask Plugin» смотрели?
|
|
12.10.2017, 12:38
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
Nexus,
|
Сообщение от Nexus
|
|
вам принципиально, чтобы скрипт был на нативном js?
|
да, конечно желательно.
|
Сообщение от Nexus
|
|
«jQuery Mask Plugin» смотрели?
|
есть много разных плагинов, но мне они абсолютно ни к чему, потому что у меня используется только лишь одно поле.
Да и что самое главное, считаю, раз уже взялись за этот скрипт, желательно довести его до кондиции, и не уважительно будет по отношению к рони его бросить.
|
|
12.10.2017, 13:34
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,132
|
|
|
LADYX,
далее сами
|
|
12.10.2017, 13:48
|
|
Профессор
|
|
Регистрация: 19.02.2015
Сообщений: 219
|
|
|
рони,
сам не сделаю. В любом случае вам огромное спасибо!
|
|
17.10.2017, 11:09
|
|
Новичок на форуме
|
|
Регистрация: 17.10.2017
Сообщений: 1
|
|
|
Зачем три input ?
|
|
|
|
