Javascript-форум - Поле для телефона

Цитата:
Сообщение от LADYX
Да, я знаю, но мне не хотелось бы устанавливать целый плагин.
В любом случае тут двумя строчками кода не отделаешься. Хотя есть тут один виртуоз... Может напишет)

LADYX, вот делал как-то маску для времени. Можно модифицировать под свои нужды.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Inputmask light</title>
</head>
<body>
  <input id="input_time" type="text">
  <label for="input_time">Время</label>

  <script>
    
    var inputMask = function (d, s1, s2) {
      var el = d.querySelector(s1);

      if (!el) return;

      mask(el, '__:__:__', d.querySelector(s2));

      function mask(node, mask, placeholder) {

        node.addEventListener('mouseenter', switchTypeEvent);
        node.addEventListener('mouseleave', switchTypeEvent);
        node.addEventListener('click', switchTypeEvent);
        node.addEventListener('keydown', switchTypeEvent);
        node.addEventListener('blur', switchTypeEvent);

        function switchTypeEvent(e) {
          switch(e.type) {
            case 'mouseenter':
              hangMask(node, mask, true);
              break;
            case 'mouseleave':
              hangMask(node, mask, false);
              break;
            case 'blur':
              hangMask(node, mask, false);
              break;
            case 'click':
              var indx = getFirstUnderscoreIndx(node);
              setCaretPosition(node, indx);
              break;
            case 'keydown':
              var valid_code = validate(e);

              if (valid_code &&
                 valid_code !== 8 &&
                 valid_code !== 9 &&
                 valid_code !== 13 &&
                 valid_code !== 17 &&
                 valid_code !== 116 &&
                 valid_code !== 37 &&
                 valid_code !== 39) {
                e.preventDefault();
                replaceFirstUnderscore(node, e);

              } else if (valid_code && valid_code === 8) {
                e.preventDefault();
                replaceNumberToUnderscore(node, e);

              } else if (valid_code &&
                        (valid_code === 9 ||
                         valid_code === 13 ||
                         valid_code === 116 ||
                         valid_code === 37 ||
                         valid_code === 39)) {
              } else if (valid_code && valid_code === 17) {
                node.blur();
              } else {
                e.preventDefault();
              }
              break;
            default:
          }

        }

        function hangMask(element, value, state) {
          if (!element.value && state) {
            element.value = value;
            visiblePlaceholder('none');
          } else if (element.value === value &&
                    !state &&
                    (!isFocused() ||
                    isFocused() !== element.id)) {
            element.value = '';
            visiblePlaceholder('block');
          }

          function isFocused() {
            return d.activeElement.id;
          }

          function visiblePlaceholder(state) {
            if (placeholder)
              placeholder.style.display = state;
          }

        }

        function setCaretPosition(element, n) {
          if (n < 0) return;
          element.selectionEnd = n;
        }

        function getFirstUnderscoreIndx(element) {
          return element.value.search(/_/);
        }

        function validate(e) {
          if ((e.keyCode < 48 &&
            e.keyCode !== 8 &&
            e.keyCode !== 9 &&
            e.keyCode !== 13 &&
            e.keyCode !== 17 &&
            e.keyCode !== 37 &&
            e.keyCode !== 39) ||
            e.keyCode > 57 &&
            e.keyCode !== 116) {
            return false;
          }
          return e.keyCode;
        }

        function replaceFirstUnderscore(element, e) {
          var number = e.key;
          var val = element.value;

          element.value = val.replace(/_/, number);
          var indx = getFirstUnderscoreIndx(element);
          setCaretPosition(element, indx);
        }

        function replaceNumberToUnderscore(element, e) {
          var val = element.value;
          var caret_index = getCaretPosition(element);
          var symbol_index = getSymbolIndex(val, element, caret_index);
          var new_mask = cutMask(element, symbol_index);

          if (new_mask) {
            element.value = new_mask;
            var indx = getFirstUnderscoreIndx(element);
            setCaretPosition(element, indx);
          }

          function cutMask(el, n) {
            if (n < 0) return false;
            var cut1 = el.value.substring(0, n);
            var cut2 = el.value.substring(n + 1);
            return cut1 + '_' + cut2;
          }

          function getSymbolIndex(val, el, indx) {
            var n = --indx;
            if (val[n] === ':' || val[n] === '-') {
              setCaretPosition(el, n);

              return --n;
            }
            return n;
          }

          function getCaretPosition(el) {
            return el.selectionEnd;
          }

        }

      }

    }

    inputMask(document, '#input_time', 'label[for="input_time"]');

  </script>
</body>
</html>