I’m developing an email app and would like to include a feature similar to Gmail’s. You know how Gmail displays a dialog when you attempt to close the tab while writing an email? It usually says something like, “Are you sure you want to leave this page? Your changes may not be saved.”
I need to achieve this functionality for my application. When a user types in the email editor and inadvertently tries to close the tab, I want to prompt them with a confirmation message to avoid losing their progress.
What is the best method to determine when a user is going to exit the page and show a warning like this? I’m searching for a JavaScript solution that works consistently across various browsers.
Been working on email clients for years - here’s what actually works. Track user interaction properly. Don’t use text change events because they fire when users paste or delete everything. Watch for meaningful changes like typing or editing the subject line. I use input events with a short debounce delay to avoid false triggers. Mobile browsers handle beforeunload differently, so build auto-save as backup. Safari’s weird with this event - test across versions. One gotcha: the warning fires on page refreshes too, which confuses users who just want to reload.
u can use the beforeunload event for this. Just add window.addEventListener('beforeunload', function(e) { e.preventDefault(); return ''; }); when typing starts, then remove it once they save. should work fine on all modern browsers.
The beforeunload approach works, but you’ll want to make it smarter. I built something like this last year - tracking the editor’s dirty state is the way to go. Set a boolean flag when content changes in your textarea or contenteditable, then only show the beforeunload warning when that flag’s true. Don’t forget to clear the flag after the email sends or saves as draft, or users get annoying warnings even after saving. One gotcha - some browsers now ignore custom messages in beforeunload dialogs for security, so don’t count on showing specific text.