Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   как сделать маску телефона в input c +7(___) без jQuery (https://javascript.ru/forum/dom-window/63870-kak-sdelat-masku-telefona-v-input-c-7-___-bez-jquery.html)

sovsem-nub 05.07.2016 14:58

как сделать маску телефона в input c +7(___) без jQuery
 
на чистом 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.

рони 05.07.2016 16:17

Маска для телефона на js
 
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 08.07.2016 21:33

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

LADYX 24.09.2017 15:14

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

рони 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 24.09.2017 16:18

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

LADYX 24.09.2017 16:32

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

рони 24.09.2017 17:46

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

LADYX 24.09.2017 18:09

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

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

рони 24.09.2017 18:44

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


Часовой пояс GMT +3, время: 16:22.