JQuery плагин ipmask для ввода ip v4



    Для админки возникла задача – сделать удобным ввод ip-адресов.
    Существующие плагины не устраивали тем, что они либо не точно проверяли формат и позволяли вводить ip типа 264.734.443.332, или не умели сами ставить разделители, или при вводе октета большего чем 255 уменьшали до наименьшего, т.е. при вводе 665 вместо того, чтобы поставить разделитель точку после 66, т.е. сделать 66.5 уменьшали до 255, т.е. никакого удобства.

    В итоге появилось желание сделать плагин, который бы позволял вводить только цифры, а разделители точки устанавливались бы сами на нужных местах, когда это возможно.


    Это мой первый плагин, опыта создания не было, решил переделать существующий похожий плагин.
    Чтобы не городить кучу условий условий и исключений для проверки ввода символов, было принято решение проверять введенную строку по регулярному выражению. Если каждый введенный символ соответствовал, отлично. Если нет, то пробуем этот символ с разделителем.
    Одно регулярное выражение проверяет полную строку ip-адреса, другое проверяет строку может ли она являться частью ip-адреса.

    В итоге код получился небольшим и главную функцию плагин выполняет.

    Если кому-то понадобится
    пример работы плагина (обновлен 07.03.2014)

    github

    Из того, что можно было бы сделать:
    Конечно было бы плюсом ввод ip.v6, причем с поддержкой сокращенной формы, думаю сделать это, как только это понадобится в нашей админке.

    upt (07.03.2014):
    — Исправлены баги
    — Добавлен placeholder
    — Добавлена возможность редактирования отдельных октетов.
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 19

      0
      Гм, но вы же не будете думать в процессе набора о том, надо ли поставить точку или нет, вы, скорее всего, её просто поставите, не так ли? А так получается какое-то непредсказуемое поведение.
        0
        Этот факт определяется плагином, судя по демке.
          +2
          Автора можно понять. Иногда хочется сделать что-то интеллектуальное, даже если на практике оно не пригодится :о)
            0
            Вы можете привести конкретный пример непредсказуемости поведения плагина? Вы попробовали его или теоретически предположили?
            Естественно, что разделитель автоматически ставится только тогда, когда точно понятно, что там не может быть ничего другого. Для адреса 10.10.10.10 придется руками вводить три точки. А так как два разделителя подряд не могут быть введены, даже если Вы повторно поставите точку ошибки быть не должно.
              0
              Я попробовал и, честно говоря, задумываюсь каждый раз при вводе, поставится точка сама или нет. То есть да, поведение предсказуемо, выразился неточно, но его каждый раз надо обдумывать. Проще вводить.
                0
                Я согласен, что без плейсхолдера не интуитивно понятно получилось, но к сожалению я не знаю как это правильно сделать. А так плагин рассчитан для админки, где люди часто пользуются этим функционалом, поэтому быстро привыкают не думать о формате. Например формат вода телефона и mac-адреса добавил порядочно удобства, а вот с ip не так все просто было и готового нужного решения не нашлось.
            +3
            Запятую в качестве разделителя имеет смысл сделать, так как на цифровом блоке клавиатуры часто запятая вместо точки.
              0
              Сделал. Запятую и пробел.
              +4
              Нужен плейсхолдер в виде точек, чтоб было понятно, что поле само умеет разделять.
                +2
                и сдвиг курсора по пробелу уж тогда, как в винде
                  0
                  Попробовал начать делать, но столкнулся с проблемой, что нужно менять позицию курсора. В jquery такого функционала нет, есть плагин… в общем нужно будет разбираться.
                  +1
                  А возможность написать несколько точек подряд — это баг или фича?
                  Плюс несколько напрягает отсутствие возможности выделить текст и ввести новый IP без обязательного удаления старого. Т.е. Ctr+A -> Ввводим текст, а не Ctr+A -> Del -> Вводим текст.
                    0
                    Можно добавить выделение строки по фокусу на поле. Тогда будет сразу работать ввод текста.
                      +1
                      Да, почему-то редактирование отсутствует совершенно. Разве что удалять цифры можно — добавлять нельзя.
                        0
                        Да, несколько ввод нескольких точек подряд — это баг :( Постараюсь поправить.
                        0
                        В Opera 12 и IE 10 не работает ваш пример.
                        Так же если вставить левые данные, то он их никак не обрабатывает, хотя должен либо не позволять вставлять, либо как-то форматировать, например убирать всё, кроме цифр, и расставлять точки.
                          0
                          Да, пример действительно не работает в IE, не знаю почему. Но проверил работу плагина на тестовой странице, вроде работает.
                          0
                          digitalbush.com/projects/masked-input-plugin/ jQuery Masked, например
                            0
                            Это замечательный плагин, которым я пользуюсь для телефонов, доделал поддержку mac-адресов. Но его не приспособить для ip-адресов к сожалению.

                          Only users with full accounts can post comments. Log in, please.