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)). Подробнее по ссылке

+31

18 марта 2010, 20:43

SpirITzzz

комментарии (19)

- KrasivayaSvo,
- 18 марта 2010, 23:04
- #
- ↓
- - +2
Открываем демо, ставим курсор на Input test, жмем backspace и жмем F5…
И ничего у меня не спрашивает.
Вешать нужно не на change судя по всему, а на input. Хотя это тоже скорее всего не спасет ибо можно вставить текст с помощью правой кнопки мыши (ПКМ + Вставить + F5)
- - KrasivayaSvo,
  - 18 марта 2010, 23:40
  - #
  - ↑
  - ↓
  - - +1
  Еще вариант вставки через меню браузера (Правка — Вставить). Тоже предупреждения нет.
  Это все конечно мелочи
  - - SpirITzzz,
    - 19 марта 2010, 01:08
    - #
    - ↑
    - ↓
    - +2
    спасибо за наводку, действительно change срабатывает не тогда, когда ето нужно :).
    Заменил change на live('change keypress'), теперь все должно работать как следует :)
    обновил демо.
- sqrt,
- 19 марта 2010, 08:26
- #
- ↓
- - 0
спасибо, то что доктор прописал)
- winbackgo,
- 19 марта 2010, 11:42
- #
- ↓
- - 0
Еще нужно бы учитывать hidden, так как многие из них меняются по средствам js.
- bo883,
- 19 марта 2010, 11:55
- #
- ↓
- - 0
Спасибо, как раз то что не хватала проекту. буду внедрять.
- stalcer,
- 19 марта 2010, 12:37
- #
- ↓
- - +1
Было бы полезно помимо параметра для отлавливаемых ссылок (aOutConfirm) добавить параметр для игнорируемых ссылок (aOutIgnore?), чтобы плагин срабатывал на все ссылки страницы за исключением указанных.
- - SpirITzzz,
  - 19 марта 2010, 12:51
  - #
  - ↑
  - ↓
  - - 0
  так это можно сделать через aOutConfirm: «a[class!='ignore']» :)
  - - stalcer,
    - 19 марта 2010, 13:12
    - #
    - ↑
    - ↓
    - +1
    Да, спасибо, забыл про селекторы атрибутов. =)
- niceteg,
- 19 марта 2010, 17:14
- #
- ↓
- - +1
спасибо, вовремя!

Уже думал садиться искать… а тут вот!
- - SpirITzzz,
  - 19 марта 2010, 17:21
  - #
  - ↑
  - ↓
  - - 0
  всегда пожалуйста ;)
- burzilov,
- 19 марта 2010, 19:07
- #
- ↓
- - 0
Объявляю войну безграмотности!
— Гугл что делает? (в вопросе нет мягкого знака)
— Заботится (в ответе тоже нет мягкого знака)
- - SpirITzzz,
  - 19 марта 2010, 19:27
  - #
  - ↑
  - ↓
  - - 0
  бывает, поправил :)
- david_mz,
- 19 марта 2010, 23:18
- #
- ↓
- - 0
“window.onbeforeunload = confirmExit;” — вот так вот просто, наивно и без затей. А если там уже висит какой-то обработчик?
- - SpirITzzz,
  - 20 марта 2010, 00:22
  - #
  - ↑
  - ↓
  - - 0
  меня данный вариант реализации от автора плагина вполне устроил, и эту часть я не трогал :)
  если уж больно нужно, то я просто уверен, что Вы без труда это переделаете ;)
  - - david_mz,
    - 20 марта 2010, 00:34
    - #
    - ↑
    - ↓
    - 0
    Вы-то предлагаете готовое решение.
    - SpirITzzz,
      
      20 марта 2010, 00:55
      
      #
      
      ↑
      
      ↓
      
      0
      которое каждый вправе использовать/не использовать и изменять как ему угодно :)
      если есть предложение, как это улучшить — я же не против, огласите его :)
      
      сразу всех «если» порой не учесть, они правятся в процессе использования, а под мои нужны (да и нужды большинства людей) “window.onbeforeunload = confirmExit;” — вот так вот просто, наивно и без затей вполне устроит :)
- rvsob,
- 1 июля 2010, 15:19
- #
- ↓
- - 0
var defaults = { message: '', aOutConfirm: 'a[target!=_blank][target!=blank]', };
запятая одна лишняя у Вас в исправленном .js.
- - SpirITzzz,
  - 1 июля 2010, 22:44
  - #
  - ↑
  - ↓
  - - 0
  спасибо, поправил :)