开发者

Suppress Safari’s “You have entered text…” warning?

开发者 https://www.devze.com 2023-02-19 20:12 出处:网络
Safari helpfully (?) prompts before closing a tab or window when text has been entered into an input.

Suppress Safari’s “You have entered text…” warning?

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?


It 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:

  1. Hide the input
  2. Trigger layout
  3. 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 accomplished 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.

0

精彩评论

暂无评论...
验证码 换一张
取 消