JQuery FormNavigate — плагин для удобной работы с onbeforeunload

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

    Сперва сделал это используя window.onbeforeunload, но злая опера не поддерживает это событие.
    Призадумался, попутно нашёл плагин для jquery под названием FormNavigate.


    Ничем особенным это плагин не выделяется, основная его функция сводится к тому, что он отлавливает событие change у заданной формы и навешивает событие window.onbeforeunload:

    $("YourForm").FormNavigate("YourMessage");

    * This source code was highlighted with Source Code Highlighter.


    YourForm — селектор формы, в которой будем отлавливать изменения
    YourMessage — соответственно сообщение, которые будет выдано при срабатывании события onbeforeunload.

    Еще раз взглянув на gmail, я заметил, что там при попытки перейти на ссылку срабатывает confirm, а уже при закрытии и перезагрузке окна — onbeforeunload. Это частично решает проблему с оперой (мы можем отловить попытку перейти на другую страницу, но отловить закрытие и перезагрузку страницы так и не удастся).

    И решил я дописать этот плагин, добавить пару опций. В итоге по функционалу получилось почти так же, как и на gmail :)

    $("YourForm").FormNavigate({
      message: "Содержимое было изменено! \n Вы уверены, что хотите покинуть страницу без сохранения?",
      aOutConfirm: "#DivID a.confirm, #DivID2 a"
    });


    * This source code was highlighted with Source Code Highlighter.


    Выбираем форму, изменения на которой будем отлавливать, в message указываем текст сообщения, а в aOutConfirm — где и какие ссылки будем отлавливать (можно убрать этот параметр, тогда по-умолчанию будут обрабатываться нажатия на все ссылки).

    Демо можно увидеть тут
    Измененный плагин смотреть тут

    UPD: спасибо доброму человеку krasivayasvo за наводку, изменил событие change в плагине на live('change keypress'), обновил демо и сам плагин.

    UPD2: спасибо еще одному доброму человеку rvsob за исправление плагина (исправлены некоторые проблемы, например, переопределения события onbeforeunload, неправильной работы с текстовым полем (textarea)). Подробнее по ссылке

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 19

      +2
      Открываем демо, ставим курсор на Input test, жмем backspace и жмем F5…
      И ничего у меня не спрашивает.
      Вешать нужно не на change судя по всему, а на input. Хотя это тоже скорее всего не спасет ибо можно вставить текст с помощью правой кнопки мыши (ПКМ + Вставить + F5)
        +1
        Еще вариант вставки через меню браузера (Правка — Вставить). Тоже предупреждения нет.
        Это все конечно мелочи
          +2
          спасибо за наводку, действительно change срабатывает не тогда, когда ето нужно :).
          Заменил change на live('change keypress'), теперь все должно работать как следует :)
          обновил демо.
        0
        спасибо, то что доктор прописал)
          0
          Еще нужно бы учитывать hidden, так как многие из них меняются по средствам js.
            0
            Спасибо, как раз то что не хватала проекту. буду внедрять.
              +1
              Было бы полезно помимо параметра для отлавливаемых ссылок (aOutConfirm) добавить параметр для игнорируемых ссылок (aOutIgnore?), чтобы плагин срабатывал на все ссылки страницы за исключением указанных.
                0
                так это можно сделать через aOutConfirm: «a[class!='ignore']» :)
                  +1
                  Да, спасибо, забыл про селекторы атрибутов. =)
                +1
                спасибо, вовремя!

                Уже думал садиться искать… а тут вот!
                  0
                  всегда пожалуйста ;)
                  0
                  Объявляю войну безграмотности!
                  — Гугл что делает? (в вопросе нет мягкого знака)
                  — Заботится (в ответе тоже нет мягкого знака)
                    0
                    бывает, поправил :)
                    0
                    “window.onbeforeunload = confirmExit;” — вот так вот просто, наивно и без затей. А если там уже висит какой-то обработчик?
                      0
                      меня данный вариант реализации от автора плагина вполне устроил, и эту часть я не трогал :)
                      если уж больно нужно, то я просто уверен, что Вы без труда это переделаете ;)
                        0
                        Вы-то предлагаете готовое решение.
                          0
                          которое каждый вправе использовать/не использовать и изменять как ему угодно :)
                          если есть предложение, как это улучшить — я же не против, огласите его :)

                          сразу всех «если» порой не учесть, они правятся в процессе использования, а под мои нужны (да и нужды большинства людей) “window.onbeforeunload = confirmExit;” — вот так вот просто, наивно и без затей вполне устроит :)
                      0
                      var defaults = {
                      message: '',
                      aOutConfirm: 'a[target!=_blank][target!=blank]',
                      };

                      запятая одна лишняя у Вас в исправленном .js.
                        0
                        спасибо, поправил :)

                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                      Самое читаемое