如何检查页面中的某些内容是否已更改
How to check that something has been changed in the page?
如果我在页面中进行任何更改,然后尝试在不保存的情况下导航离开,我希望收到一条错误消息,询问我们是否要保存更改。
onbeforeunload
事件就是你需要的。将一个函数绑定到它,每当用户尝试从页面导航离开(按后退、前进、单击链接、关闭选项卡或窗口本身)时,该函数都会返回要显示的string
(仅适用于 Chrome,其他浏览器将显示默认消息)。
向用户显示类似确认对话框,如果用户选择继续,则会执行他请求的操作。如果他选择留在页面上,什么都不会发生。
$('input').change(function(){
window.onbeforeunload = function(){
//Return the message that should be displayed in Chrome.
// Other browsers will show default message.
return "You have unsaved changes on this page";
};
});
保存更改后,只需设置window.onbeforeunload = null
,以便在用户尝试离开页面时删除消息。
有几件事需要考虑。
您使用哪些元素进行输入。这将影响您的元素选择器(在下面的代码中使用)如果你使用像jeditable这样的插件,你必须知道的不仅仅是你用于输入的元素。您还需要知道用于显示值的元素。
如果您绑定到更改,如 Sudhirs 回答,我建议使用 live 执行此操作,而不是以自动支持就地编辑的方式绑定。
在更改事件上设置标志的标志解决方案不包括用户将值更改回原始值的情况。
下面代码的思想是迭代要监视的所有元素并存储原始值。对于卸载,然后比较值,如果发现更改,则应发出警告。
$(function(){
function getVal(){
var val,node = $(this),nodeType = node.attr('type');
if(this.nodeName.toLowerCase() == input){
if(nodeType === "checkbox" || nodeType === "radio"){
val = node.attr('checked');
} else{
val = node.val();
}
} else{
val = node.text();
}
return val;
}
$(elementSelector).each(function)({
$(this).data('original',getVal.Call(this));
});
window.onbeforeunload = function(){
var hasChanges;
$(elementSelector).each(function(){
var org = $(this).data('original'),val = getVal.call(this);
hasChanges = hasChanges || (org !== val)
});
if(hasChanges){
return "Are you sure you wish to leave this page. Changes will be lost");
}
};
});
如果用户在保存后留在页面上(即数据使用 ajax 发布到服务器),则需要更新存储值,以便后续更改再次正确欺骗消息,但如果用户在保存后未更改任何内容,则不会欺骗任何消息
相关文章:
- Javascript是否可以检查文件中的内容更改
- 是否可以检查父iframe的id
- 是否可以检查文件是否返回 404 错误,如果它位于具有 javascript 或 jQuery 的不同服务器上
- 是否需要检查正则表达式匹配长度以确定是否至少有一个匹配项
- 如何在Kendo TreeView中检查父节点的子节点是否已检查
- 是否可以检查通用谷歌分析中是否存在自定义维度
- 我们是否需要“检查重复键”的规则?在ESLint
- 是否可以检查XMLHttpRequestObject.使用if条件的responseText值
- 是否可以检查DOM.readyState for Jasmine
- 是否可以检查WebSocket 403响应
- 登录是否存在检查Angular JS
- 是否可以检查使用JS的哪个浏览器支持哪个视频/音频“编解码器”?
- 移动& lt; tr>根据复选框内是否包含
检查 - 是否可以检查在HTML页面中加载了多少字节?
- 是否可以检查用户是否有声音由JS启用
- 是否有检查变量类型的快捷语法
- 是否可以检查csv文件中是否存在字符串
- 是否需要检查每个控制器页面中的登录功能
- 是否有检查一个js变量是d3选择
- JavaScript可选参数,我是否需要检查未定义