Форум

sovsem-nub · #1 (**permalink**) 05.07.2016, 14:58

на чистом javascript нашел только такую маску

<html>
<head>
<script type="text/javascript">
  function mask(inputName, mask, evt) {
    try {
      var text = document.getElementById(inputName);
      var value = text.value;

      // If user pressed DEL or BACK SPACE, clean the value
      try {
        var e = (evt.which) ? evt.which : event.keyCode;
        if ( e == 46 || e == 8 ) {
          text.value = "";
          return;
        }
      } catch (e1) {}

      var literalPattern=/[0\*]/;
      var numberPattern=/[0-9]/;
      var newValue = "";

      for (var vId = 0, mId = 0 ; mId < mask.length ; ) {
        if (mId >= value.length)
          break;

        // Number expected but got a different value, store only the valid portion
        if (mask[mId] == '0' && value[vId].match(numberPattern) == null) {
          break;
        }

        // Found a literal
        while (mask[mId].match(literalPattern) == null) {
          if (value[vId] == mask[mId])
            break;

        newValue += mask[mId++];
      }

      newValue += value[vId++];
      mId++;
    }

    text.value = newValue;
  } catch(e) {}
}
</script>
</head>
<body>
<form id="form1">
<input type="text" id="zipCode" onkeyup="javascript:mask('zipCode', '+7(000)000-00-00', event);" value="+7(___)___-____" >
</form>
</html>

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

рони · #2 (**permalink**) 05.07.2016, 16:17

sovsem-nub,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
    <input  value="+7(___)___-____">
    <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) {
    var matrix = this.defaultValue,
        i = 0,
        def = matrix.replace(/\D/g, ""),
        val = this.value.replace(/\D/g, "");
        def.length >= val.length && (val = def);
    matrix = matrix.replace(/[_\d]/g, function(a) {
        return val.charAt(i++) || "_"
    });
    this.value = matrix;
    i = matrix.lastIndexOf(val.substr(-1));
    i < matrix.length && matrix != this.defaultValue ? i++ : i = matrix.indexOf("_");
    setCursorPosition(i, this)
}

    var input = document.querySelector("input");
    input.addEventListener("input", mask, false)
});
  </script>
</body>

</html>

warren buffet · #3 (**permalink**) 08.07.2016, 21:33

Крутотень, но я вот смотрю на колбеки и заказы в БД, как народ вводит - как хочет, так и вводит, кому как удобно и всем по-моему поссать на эти паттерны. Проблематика видимо в том, что когда у одного есть свистелка, ее надо прикрутить всем, а то видишь ли, опмтимизаторы набегут и все равно заставят. )))

LADYX · #4 (**permalink**) 24.09.2017, 15:14

Помогите, пожалуйста немного изменить этот скрипт. Очень нужно следующее: поле должно быть пустое, а при фокусе (когда установили курсор в поле) появлялось только +7, и именно после/за +7 был курсор. И после этого, набирая номер (именно при написании номера) автоматом подставлялись пробелы и скобки по такой комбинации: +7 (ххх) ххх хх хх
Огромное спасибо за помощь!

рони · #5 (**permalink**) 24.09.2017, 15:56

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() {
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>
</body>

</html>

LADYX · #6 (**permalink**) 24.09.2017, 16:18

рони,
Да, именно то, что надо. Огромнейшее вам спасибо!!! Удачи вам!

LADYX · #7 (**permalink**) 24.09.2017, 16:32

рони,
заметил одну странность)) попробуйте набрать любой номер полностью. Например, вы набрали: +7 (111) 333 4444. Если продолжить набирать и нажать 4, то ничего не меняется, а если ввести любую другую цифру, то стирается всё или почти всё.

рони · #8 (**permalink**) 24.09.2017, 17:46

LADYX,
смотрите пост №5 снова

LADYX · #9 (**permalink**) 24.09.2017, 18:09

рони,
да, и простите пожалуйста, последний вопрос. У моего input-а для телефона id="tel". Значит, чтобы его привязать именно к этому полю, нужно изменить строку на:

var input = document.querySelector("#tel");

верно? Но если я так делаю, то тогда у меня остальные поля не активируются при фокусе. Что я делаю неправильно?

рони · #10 (**permalink**) 24.09.2017, 18:44

LADYX,
добавил поля и id в первое поле, может вы рано скопировали, попробуйте обновить окно и снова сделать копию.
смотрите пост №5 снова

Форум

Справочник

Discord чат

Курсы javascript