Prevent user from going to other tab on website

Question

I'm not sure how you can do this, but if a user on my site enters some information and selects another link or tab without saving, I would like to present a popup and allow them to cancel that action. If the action is canceled, I want to prevent the user from going to the selected link/tab.

Can you actually do this? I've thought about using onuload javascript event but I'm not sure how you could prevent the action.

This is a ASP.net site using jquery.

[onbeforeunload](https://developer.mozilla.org/en-US/docs/Web/API/Window.onbeforeunload) — Pointy, Jun 24 '14 at 18:30
@Pointy that works for the same page, what about opening on another tab? — DontVoteMeDown, Jun 24 '14 at 18:31
I know of no way that a page can prevent the user from choosing (or launching) another tab. If I did, I would promptly report it as a severe denial-of-service security bug. — Pointy, Jun 24 '14 at 18:32
possible duplicate of [onbeforeunload confirmation screen customization](http://stackoverflow.com/questions/1335727/onbeforeunload-confirmation-screen-customization) — blex, Jun 24 '14 at 18:32
By tab, I mean same site but other tab on the site. @Pointy can you prevent the user from going to another tab on same site using onbeforeunload? — Oscar, Jun 24 '14 at 18:33
@Oscar ok wait - when you say "tab", what exactly are you talking about? If it's some control *inside your own page*, then yes you can do whatever you want; disable the control, hide other tabs, threaten the user, whatever. But if you're talking about *browser* tabs, like for separate websites, then no. — Pointy, Jun 24 '14 at 18:35
Generally what you'd do for your own pages is watch for "keypress" and "paste" events in your form fields so that you can set a flag when there's typed but unsaved stuff. Then make your event handlers for other controls check for that status. Of course there are a lot of details and interaction issues, but they completely depend on the architecture of your particular site. — Pointy, Jun 24 '14 at 18:37

John Wu · Answer 1 · 2014-06-25T02:51:29.233

It's a rather imperfect solution, but this is as close as I could get.

Add this event handler to your page:

window.onblur = function() {
    var flag = confirm("Please don't leave!  Click OK if you really want to leave.  I hope you click cancel and stay with me.");
    if (flag) {
        window.onblur = undefined;
        alert("Ok you can leave now.  **sob**");
        //The user is leaving.  You can do a little cleanup here if you need to.
    }
}

Note: No solution in the world will prevent a user from opening another browser. Or, better yet, picking up their mobile phone and browsing from there. You can't force the user to remain focused on your app.

I strongly suggest you rethink your UX design if it really is so fragile that you can't allow the user to multitask.

Prevent user from going to other tab on website

1 Answers1