Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.09.2017, 12:09
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

Поле для телефона
Здравствуйте! Подскажите, пожалуйста, поле для телефона я сделал так:
<input type="text" name="tel" id="tel" maxlength="12" placeholder="+7 (ххх) ххх хх хх" pattern="^\+7\d{10}$" onkeyup="this.value = this.value.replace (/[^0-9+]/, '')">

А как если убрать
Код:
maxlength="12"
и
Код:
onkeyup="this.value = this.value.replace (/[^0-9+]/, '')"
и вывести это в отдельный javascript?
И скажите, пожалуйста, можно ли сделать как то так, чтобы при фокусе +7 уже добавлялся без возможности его стереть, а при наборе номера автоматически подставлялись пробелы и скобки. Мне нужно, чтобы получалась вот такая комбинация:
+7 (ххх) ххх хх хх
Помогите, пожалуйста. Очень вам благодарен!
Ответить с цитированием
  #2 (permalink)  
Старый 24.09.2017, 12:19
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

LADYX,
готовые плагины есть и их описание.
Ответить с цитированием
  #3 (permalink)  
Старый 24.09.2017, 12:39
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

laimas,
здравствуйте! Да, я знаю, но мне не хотелось бы устанавливать целый плагин.
Ответить с цитированием
  #4 (permalink)  
Старый 24.09.2017, 12:50
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от LADYX
Да, я знаю, но мне не хотелось бы устанавливать целый плагин.
Он ни такой и большой, но если вопрос звучит "как это делается" скачайте несжатую версию плагина, в нем и узнаете как.
Ответить с цитированием
  #5 (permalink)  
Старый 24.09.2017, 13:16
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 509

Сообщение от 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>
Ответить с цитированием
  #6 (permalink)  
Старый 24.09.2017, 14:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

LADYX,
Маска для телефона на js
Ответить с цитированием
  #7 (permalink)  
Старый 24.09.2017, 15:07
Аватар для LADYX
Профессор
Отправить личное сообщение для LADYX Посмотреть профиль Найти все сообщения от LADYX
 
Регистрация: 19.02.2015
Сообщений: 217

рони,
здравствуйте! Да, спасибо за ссылку. Некоторые моменты в этом скрипте мне не совсем подходят. Задам вопрос в той теме.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Поле для ввода телефона. При потери фокуса поля, маска прячется DDim1000 Общие вопросы Javascript 1 23.11.2016 20:02
Как установить значения поле name для каждого элемента формы autofan jQuery 0 27.07.2014 10:57
Получить координаты курсора в текстовом поле в пикселях prike Events/DOM/Window 4 23.05.2013 04:35
Решение проблемы кодировок для AJAX и PHP без iconv (cp1251 в AJAX) Serge Ageyev AJAX и COMET 10 24.04.2013 20:48
Дописать JS и PHP валидатор для телефона 3-3-4 conductor3 Работа 1 11.05.2010 00:01