Safari helpfully (?) prompts before closing a tab or window when text has been entered into an input.
There are some cases where, as a web developer, this isn’t desirable — for example, when the input is a live search where the user has probably already gotten the results he’s looking for when the window is closed, even though there’s still text in the field.
How can I let Safari know that text in a particular input doesn’t need its protection?
Safari helpfully (?) prompts before closing a tab or window when text has been entered into an input.
There are some cases where, as a web developer, this isn’t desirable — for example, when the input is a live search where the user has probably already gotten the results he’s looking for when the window is closed, even though there’s still text in the field.
How can I let Safari know that text in a particular input doesn’t need its protection?
Share Improve this question asked Mar 24, 2011 at 22:30 s4ys4y 51.7k12 gold badges72 silver badges98 bronze badges 6-
How do i get safari to do this? I figured that was JSs
onbeforeunload. I just created a textarea and closed the tab without any warning at all. How do I recreate this? – Oscar Godson Commented Mar 24, 2011 at 22:37 - you could clear the text fields in the onbeforeunload event. I don't know if that would work or not but it sounds like it might :) – user471679 Commented Mar 24, 2011 at 22:38
- Tried it with Google, and tried some other inputs i created... no go. Could you post your HTML and JS if any you have for this? – Oscar Godson Commented Mar 24, 2011 at 22:40
-
@Oscar: It looks like the input must be inside a form with a method. So, a minimal test case would look like
<form method="get"><input></form>. However, I have no trouble reproducing this on Google and on Stack Overflow (I just type some letters and try to close the window). Is it possible that you've disabled this warning in your copy of Safari? There's no GUI for the preference, but there are utilities and mand line examples of how to disable it. – s4y Commented Mar 25, 2011 at 1:04 - What version of Safari are you on? Win or Mac? And no, I didn't disable anything through mand line :\ let me know if @p--'s suggestion does or doesn't work and ill see if I cant reproduce this on my machine and e up with a solution – Oscar Godson Commented Mar 25, 2011 at 20:20
4 Answers
Reset to default 6It seems like you are able to disable this warning for an entire page by having an onbeforeunload handler on <body> (even an empty one will do). For example, the following will not produce the warning:
<body onbeforeunload="">
<form method="get"><input></form>
</body>
I'm not sure if this is the intended behaviour, or a bug.
I think I've got a solution to this problem, though it's unquestionably a hack (i.e. if Safari changes how this feature is implemented, it could stop working). Shown here with a touch of jQuery:
$('.unimportant').live('blur', function(){
var olddisplay = this.style.display;
this.style.display = 'none';
this.clientLeft; // layout
this.style.display = olddisplay;
});
Demo (try typing in the "unimportant" field, click somewhere else on the page, then close the window).
In short:
- Hide the input
- Trigger layout
- Show the input
You can also change the value of the input, trigger layout, and change it back.
The one limitation here is that cleaning the input has to be done explicitly. In this case, it will be dirty until blur. This works well in my situation, and probably in many others, since the input will be protected from an accidental window close until something else on the page is manipulated (e.g. a link is clicked). You could choose to run this on keyup if you're willing to live with a flicker of the insertion point every time a key is pressed.
I'm open to cleaner solutions.
I found what I think is a pretty good solution to this problem. When I use AJAX to submit the form then I want the warning to suppress. This is acplished with onbeforeunload.
window.onbeforeunload=function(e){}
But after I submit I might make additional changes and so I want the warning to show again. To do this I added a keyup handler to a form element.
$('txtarea').onkeyup=dirty;
What dirty does is checks is the input field has changed if it has then I set onbeforeunload to null.
function dirty(e){
if (e.srcElement.value != e.srcElement.defaultValue){
window.onbeforeunload=null;
}
}
I just found another solution to prevent Safari from displaying the "Are you sure you want to reload this page?" dialog when textareas have changed their content.
It turns out that setting the value through Javascript clears Safari's changed state:
$(document).on('blur', 'textarea', function() {
var value = $(this).val();
$(this).val('').val(value);
});
Clearing the value first is important, directly setting it to the content it already is does not work.
EDIT Apparently setting window.onbeforeunload to an empty function still works, however $(window).on('beforeunload', function() {}) does not.