Показать сообщение отдельно
  #1 (permalink)  
Старый 22.11.2024, 14:00
Новичок на форуме
Отправить личное сообщение для p33v0 Посмотреть профиль Найти все сообщения от p33v0
 
Регистрация: 22.11.2024
Сообщений: 3

IPv4 inputmask без jQuery
Добрый день!

Впервые встречаюсь с JS, а тут понадобилось добавить маску к input type. В приборе ограниченное количество памяти, а из библиотек подключено только zepto.min.js.

Смог родить следующий код, и есть вопрос, возможно ли его ещё как-то улучшить?
Или же в zepto есть аналог нужной мне функции.

<!DOCTYPE HTML>

<html>

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

<body>
    <label>IPv4</label>
    <input type="text" placeholder="xxx.xxx.xxx.xxx" oninput="ipv4_inputmask(this)">
    <script>
        function ipv4_inputmask(obj)
        {
          obj.value = obj.value.replace(/[^\d.]/,'');
          var oсtet = obj.value.match(/\./g);
          oсtet = (oсtet === null) ? 0 : oсtet.length;

          var last_byte = Number(obj.value.split('.')[oсtet]);
          var last_byte_len = obj.value.split('.')[oсtet].length;
          var last_symb = obj.value.substr(-1);
          var srt_slice = obj.value.slice(0, -1);

          if (last_symb === '.') // Нажатие .
            {
              if (oсtet < 4) // Переход к следующему октету
                obj.value = srt_slice + last_symb;
              else // Не даем ввести символ
                obj.value = srt_slice;
            }
          else if ((last_byte > 255) || (last_byte_len == 4)) // Текущий октет больше байта
            {
              if (oсtet < 3) // Перенести последний символ в следующий октет
                obj.value = srt_slice + '.' + last_symb; 
              else // Не даем ввести символ
                obj.value = srt_slice;
            }
        }
  </script>
</body>

</html>

Последний раз редактировалось p33v0, 27.11.2024 в 09:37. Причина: Починил кнопку запуска
Ответить с цитированием