Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   IPv4 inputmask без jQuery (https://javascript.ru/forum/dom-window/86181-ipv4-inputmask-bez-jquery.html)

p33v0 22.11.2024 14:00

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 22.11.2024 14:49

P.S. Почему-то не срабатывает в "Посмотреть!" эта часть кода, в проекте работает.
Цитата:

Сообщение от p33v0 (Сообщение 556471)
$('.ip-number').on('input', function() {
$(this).val($(this).val().replace(/[^0-9.]/, ''))
});


ksa 22.11.2024 14:54

Цитата:

Сообщение от p33v0
эта часть кода, в проекте работает

Так в твоем примере переменная $ не определена...

ksa 22.11.2024 15:04

<input id='ipv4' type="text" pattern="\d{3}\.\d{3}\.\d{3}\.\d{3}" placeholder="xxx.xxx.xxx.xxx" title='Данные нужно вводить в определенном формате' />

Такое будет работать у тебя?

p33v0 22.11.2024 15:23

Цитата:

Сообщение от ksa (Сообщение 556474)
<input id='ipv4' type="text" pattern="\d{3}\.\d{3}\.\d{3}\.\d{3}" placeholder="xxx.xxx.xxx.xxx" title='Данные нужно вводить в определенном формате' />

Такое будет работать у тебя?

Не срабатывает. При отправке формы с неправильным паттерном - не выводится сообщение. После этого, данные пытаются улететь на устройство.


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