Question

如果用户想要使用未保存的表单数据离开页面，我想显示一个确认对话框。我所拥有的是：

window.onbeforeunload = function() {
    if (not_saved) if (confirm('Changes will not be saved')) return true;
    return false;
}

但无论用户点击什么，结果都是一样的 - 愚蠢的硬编码对话框询问他们是否要离开页面或留在页面上。我想问他们的是他们是想留下还是离开，如果他们想留下什么，如果他们想要离开，他们就会离开。这甚至可能吗？我可以看到浏览器如何限制网站可以做些什么来保持用户在页面上，但我想我已经看到一些网站（我认为Google Docs）有很好的文明对话框。

Answer 1

尽管window.onbeforeunload有效，但它被视为不良做法。最好使用以下内容：

if (typeof window.addEventListener === 'undefined') {
    window.addEventListener = function(e, callback) {
        return window.attachEvent('on' + e, callback);
    }
}

window.addEventListener('beforeunload', function() {
    return 'Dialog Text Here';
});

首先我们检查window.addEventListener是否存在，它在IE中不存在，否则我们将其填充，然后我们附加事件。

Answer 2

window.onbeforeunload = function(e) {
    return 'Dialog text here.';
};

文件：

请注意，在Firefox 4及更高版本中，返回的字符串不会显示给用户。

如果事件对象的returnValue属性不为空   字符串，或者如果事件被取消，那么用户代理应该询问   用户确认他们希望卸载文档。        用户代理所示的提示可以包括returnValue属性的字符串，或其某些前导子集。（用户代理   可能希望将字符串截断为1024个字符以供显示   实例。）

Answer 3

使用jQuery，您可以设置相同的处理程序。该代码可能会根据您的版本而延迟。

[type="date"] {
  background:#fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)  97% 50% no-repeat ;
}
[type="date"]::-webkit-inner-spin-button {
  display: none;
}
[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

/* custom styles */
body {
  padding: 4em;
  background: #e5e5e5;
  font: 13px/1.4 Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;
}
label {
  display: block;
}
input {
  border: 1px solid #c4c4c4;
  border-radius: 5px;
  background-color: #fff;
  padding: 3px 5px;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);
  width: 190px;
}

您还可以使用function作为插件来更改确认或提醒bootbox。

window.onbeforeunload上的confirm（）

3 个答案: