Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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. Причина: Починил кнопку запуска
Ответить с цитированием
  #2 (permalink)  
Старый 22.11.2024, 14:49
Новичок на форуме
Отправить личное сообщение для p33v0 Посмотреть профиль Найти все сообщения от p33v0
 
Регистрация: 22.11.2024
Сообщений: 3

P.S. Почему-то не срабатывает в "Посмотреть!" эта часть кода, в проекте работает.
Сообщение от p33v0 Посмотреть сообщение
$('.ip-number').on('input', function() {
$(this).val($(this).val().replace(/[^0-9.]/, ''))
});
Ответить с цитированием
  #3 (permalink)  
Старый 22.11.2024, 14:54
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,222

Сообщение от p33v0
эта часть кода, в проекте работает
Так в твоем примере переменная $ не определена...
Ответить с цитированием
  #4 (permalink)  
Старый 22.11.2024, 15:04
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,222

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

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

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

Сообщение от ksa Посмотреть сообщение
<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:58. Причина: 1
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Существует ли плагин на подобие fancybox без использования jquery protexon jQuery 1 01.06.2014 19:33
jQuery DataTables отобразить число записей без запятой Sveta jQuery 4 24.04.2014 15:27
Стили и классы без jQuery pifon Javascript под браузер 3 03.04.2014 21:35
bind и unbind но без jquery syegorius Events/DOM/Window 1 04.12.2011 13:09
как с помощью jquery отсылать без перезагрузки... serhanters jQuery 11 22.07.2011 21:17