Как правильно подправить маску телефона?

Question

Как правильно подправить скрипт маски телефона? А именно, как сделать, чтобы закрывающая скобка появлялась после ввода третьей цифры, а не четвертой? И еще, возможно ли выделить "+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">

Answer 1

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

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:

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

Answer 2

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

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 (____) __ ____",