5

Как правильно подправить скрипт маски телефона? А именно, как сделать, чтобы закрывающая скобка появлялась после ввода третьей цифры, а не четвертой? И еще, возможно ли выделить "+7" другим цветом?

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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="tel">

4
  • Выделить другим цветом - никак. в input не предусмотрены теги html. А насчет скобки могу написать ответ.
    – user245150
    Commented 1 окт. 2017 в 10:15
  • Но если вам прям так необходимо выделить цветом можно воспользоватся contenteditable.
    – user245150
    Commented 1 окт. 2017 в 10:17
  • Ну, очевидно, что что бы заменить постановку скобки достаточно заменить "+7 (___) ___ ____" на скажем "+7 (__) ____ ____" Commented 1 окт. 2017 в 10:52
  • habrahabr.ru/post/37249
    – soft87
    Commented 4 окт. 2017 в 17:05

2 ответа 2

4
+50

Вот то что вы хотели:

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);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="tel">

У вас эта строка была немного не доделано:

return /[_\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? "" : a:

Немного изменил код, для позиции курсора, который вы в комментариях написали. Теперь курсор на месте остается.

13
  • @LADYX сейчас посмотрю это, а то что другим цветом, ответ дал @Qwertiy. посмотрите на этот вариант, если не устраивает то нечем сейчас не могу помочь, потому что я вообще не знаю вариант (как я знаю не возможно) перекрасить часть текста в input. Commented 4 окт. 2017 в 10:25
  • @RazmikGalstyan, я его просто сверху прикрыл спаном с тем же текстом. А вообще, можно что-то с наложением маски попробовать, но не уверен, что выйдет.
    – Qwertiy
    Commented 4 окт. 2017 в 10:38
  • @LADYX и RazmikGalstyan, кстати, как-то сложно с setCursorPosition - посмотрите более простой вариант: ru.stackoverflow.com/a/687383/178988
    – Qwertiy
    Commented 4 окт. 2017 в 10:40
  • @LADYX Изменил ответ, теперь курсор возвращается на место. Commented 4 окт. 2017 в 11:01
  • @LADYX, я потом отвечу, если не забуду и время будет...
    – Qwertiy
    Commented 4 окт. 2017 в 12:35
3

По поводу выделения цветом:

label {
  position: relative;
}

span, input { /* Chrome defaults for input on Windows */
  border-width: 2px;
  padding: 1px 0;
  font-family: Arial;
  font-size: 13.3333px;
}

span {
  border-style: solid;
  border-color: transparent;
  pointer-events: none;
  color: red;
  background: white;
  background-clip: content-box;
}

span {
  position: absolute;
}
<label><span>+7</span><input type="text" id="tel" value="+7 (123) 456 78 90"></label>

По поводу скобки:

var matrix = "+7 (____) __ ____",
1

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.