Добавление маски IP адреса на поле

Задача очень проста, необходимо добавить маску (фильтр) на поле ввода (input), чтобы у пользователю было доступно вводить данные только в корректном формате IP адреса. Существуют различные пути решения данной задачи. Я могу посоветовать изучить отличный плагин для JQuery, о котором есть статья на Хабре. Переходите по ссылке, там все достаточно подробно описано. Ну а я рассмотрю один из самых коротких вариантов решения данной проблемы, это использование паттернов и регулярных выражений. Ниже приведен пример html5 разметки, которая позволяет жестко задать формат ввода данных под IP адрес и не пропускать пользователя, пока данные ни будут соответствовать необходимому шаблону.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Маска IP адреса</title>
  <meta name="author" content="Shvanov Vadim [https://shwanoff.ru]">
 </head>
  <body>
   <form>
    <p>Введите IP адрес в формате 255.255.255.255</p>
    <p><input type="ip" pattern="^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$"></p>
    <p><input type="submit" value="Отправить"></p>
   </form>
   <footer>
	<p>© 2018 - <a href="https://shwanoff.ru">Шванов Вадим</a>
   </footer>
  </body>
</html>

Обратите внимание на атрибут поля input с именем pattern. Именно в нем задается регулярное выражение позволяющее вводить любой действительный IP адрес. В качестве разделителя используется точка, каждое число в блоке может принимать значения от 0 до 255. Если условия регулярного выражения не выполняются возможность нажать кнопку «Отправить» блокируется, а пользователю отображается сообщение. На рисунке ниже можно увидеть результат.