JQuery FormNavigate - plugin for convenient work with onbeforeunload
Everyone who uses the gmail web interface probably noticed how Google cares about us and doesn’t allow us to close the page if we started composing a letter and didn’t save it in drafts. And it took me for my project to do something similar.
First I did it using window.onbeforeunload , but the evil opera doesn't support this event.
I wondered, along the way, found a plugin for jquery called FormNavigate .
Nothing special about this plugin is allocated, its main function is to ensure that it catches the change event in a given form and hangs the window.onbeforeunload event:
')
YourForm - the form selector in which we will catch changes
YourMessage - respectively, the message that will be issued when the onbeforeunload event is triggered .
Having once again looked at gmail, I noticed that when trying to go to the link, confirm works, and already when you close and restart the window, onbeforeunload . This partially solves the problem with the opera (we can catch an attempt to go to another page, but it will not be possible to catch the closure and reloading of the page).
And I decided to add this plugin, add a couple of options. As a result, the functionality turned out to be almost the same as on gmail :)
We select the form, the changes on which we will catch, in the message we indicate the text of the message, and in aOutConfirm - where and which links we will catch (you can remove this parameter, then by default all links will be processed).
Demo can be seen here.
Modified plugin see here
UPD: thanks to the kind person krasivayasvo for the tip , changed the change event in the plugin to live ('change keypress'), updated the demo and the plugin itself.
UPD2: thanks to another good person rvsob for fixing the plugin (fixed some problems, for example, overriding the onbeforeunload event, incorrect work with the text field (textarea)). More details on the link
First I did it using window.onbeforeunload , but the evil opera doesn't support this event.
I wondered, along the way, found a plugin for jquery called FormNavigate .
Nothing special about this plugin is allocated, its main function is to ensure that it catches the change event in a given form and hangs the window.onbeforeunload event:
')
$( "YourForm" ).FormNavigate( "YourMessage" );
* This source code was highlighted with Source Code Highlighter .YourForm - the form selector in which we will catch changes
YourMessage - respectively, the message that will be issued when the onbeforeunload event is triggered .
Having once again looked at gmail, I noticed that when trying to go to the link, confirm works, and already when you close and restart the window, onbeforeunload . This partially solves the problem with the opera (we can catch an attempt to go to another page, but it will not be possible to catch the closure and reloading of the page).
And I decided to add this plugin, add a couple of options. As a result, the functionality turned out to be almost the same as on gmail :)
$( "YourForm" ).FormNavigate({
message: " ! \n , ?" ,
aOutConfirm: "#DivID a.confirm, #DivID2 a"
});
* This source code was highlighted with Source Code Highlighter .We select the form, the changes on which we will catch, in the message we indicate the text of the message, and in aOutConfirm - where and which links we will catch (you can remove this parameter, then by default all links will be processed).
Demo can be seen here.
Modified plugin see here
UPD: thanks to the kind person krasivayasvo for the tip , changed the change event in the plugin to live ('change keypress'), updated the demo and the plugin itself.
UPD2: thanks to another good person rvsob for fixing the plugin (fixed some problems, for example, overriding the onbeforeunload event, incorrect work with the text field (textarea)). More details on the link
Source: https://habr.com/ru/post/88071/
All Articles