MaxInterview - mask telephone

showing results for - "mask telephone"
23 Aug 2016
1<!DOCTYPE HTML>
2
3<html>
4
5<head>
6  <title>Untitled</title>
7  <meta charset="utf-8">
8</head>
9
10<body>
11    <input  value="" id="tel">   <input  value="" >  <input  value="">
12    <script>
13window.addEventListener("DOMContentLoaded", function() {
14function setCursorPosition(pos, elem) {
15    elem.focus();
16    if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);
17    else if (elem.createTextRange) {
18        var range = elem.createTextRange();
19        range.collapse(true);
20        range.moveEnd("character", pos);
21        range.moveStart("character", pos);
22        range.select()
23    }
24}
25
26function mask(event) {
27    var matrix = "+7 (___) ___ ____",
28        i = 0,
29        def = matrix.replace(/\D/g, ""),
30        val = this.value.replace(/\D/g, "");
31    if (def.length >= val.length) val = def;
32    this.value = matrix.replace(/./g, function(a) {
33        return /[_\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? "" : a
34    });
35    if (event.type == "blur") {
36        if (this.value.length == 2) this.value = ""
37    } else setCursorPosition(this.value.length, this)
38};
39    var input = document.querySelector("#tel");
40    input.addEventListener("input", mask, false);
41    input.addEventListener("focus", mask, false);
42    input.addEventListener("blur", mask, false);
43});
44  </script>
45</body>
46
47</html>
source