`
wyf
  • 浏览: 436861 次
  • 性别: Icon_minigender_1
  • 来自: 唐山
社区版块
存档分类
最新评论

Jquery 离开页面时提示保存

阅读更多
$.fn.enable_changed_form_confirm = function () {    
    var _f = this;  
 $(':text, :password, textarea', this).each(function() {    
        $(this).attr('_value', $(this).val());    
    });  
  
    $(':checkbox, :radio', this).each(function() {    
        var _v = this.checked ? 'on' : 'off';    
        $(this).attr('_value', _v);    
    });  
  
    $('select', this).each(function() {    
        $(this).attr('_value', this.options[this.selectedIndex].value);    
    });    
        
    $(this).submit(function() {    
        window.onbeforeunload = null;    
    });    
  
    window.onbeforeunload = function() {    
        if(is_form_changed(_f)) {    
            return "You will lose any unsaved content.";    
        }    
    }    
}  
  
  
  
  
  
function is_form_changed(f) {    
    var changed = false;    
    $(':text, :password, textarea', f).each(function() {    
        var _v = $(this).attr('_value');    
        if(typeof(_v) == 'undefined')   _v = '';    
        if(_v != $(this).val()) changed = true;    
    });    
  
    $(':checkbox, :radio', f).each(function() {    
        var _v = this.checked ? 'on' : 'off';  
        if(_v != $(this).attr('_value')) changed = true;    
    });    
   
    $('select', f).each(function() {    
        var _v = $(this).attr('_value');    
        if(typeof(_v) == 'undefined')   _v = '';    
        if(_v != this.options[this.selectedIndex].value) changed = true;  
    });    
    return changed;    
}  
  
  
  
  
$(function() {    
    $('form').enable_changed_form_confirm();    
});  

 

分享到:
评论

相关推荐

    .net网站 离开页面时自动保存

    在.NET框架中,通常使用ASP.NET来开发Web应用程序,而这里的实现是当用户尝试离开页面时,系统会提示用户是否保存他们在页面上进行的任何更改。 描述中提到的"VS2008打开,自带的DB,直接运行就可看效果",意味着...

    离开页面时候的警告

    标题中的“离开页面时候的警告”指的是在用户尝试离开一个网页时,网页通过JavaScript或者其他技术显示的提示信息,通常用于确认用户是否真的想要离开,或者提醒用户保存未完成的工作。这种功能常见于在线表单填写、...

    基于jQuery实现的当离开页面时出现提示的实现代码

    在现代的网络浏览体验中,页面在用户尝试离开时进行提示是一个常见的功能,尤其是当用户在填写表单或进行一些编辑工作而未保存时。这种功能的目的是防止用户的未保存数据在意外或不小心离开页面时丢失。本文将介绍...

    JavaScript实现离开页面前提示功能【附jQuery实现方法】

    例如,如果你的网页有一个在线编辑器,用户可能需要保存他们的工作,这时离开页面的提示就能提醒他们先保存。 总的来说,JavaScript和jQuery提供的`onbeforeunload`事件是实现离开页面前提示功能的关键。虽然现代...

    离开页面时检测表单元素是否被修改,提示保存的js代码

    "离开页面时检测表单元素是否被修改,提示保存的js代码"这个功能就是为了确保用户不会意外丢失他们的改动。当用户在表单上进行编辑后试图离开页面时,系统会弹出一个提示,询问他们是否确认离开,这样可以防止用户...

    jquery toast信息提示

    jQuery Toast是基于JavaScript库jQuery的一款插件,用于在页面上弹出临时性的提示信息。它不打断用户的操作,而是以浮动窗口的形式出现在屏幕某一位置,展示一段时间后自动消失。这种设计使得用户能够轻松获取反馈...

    jquery资源包,仿百度提示框,Api

    "jquery离开页面检测修改提示保存.doc"文件,这个名字暗示了它可能包含一个功能,即当用户试图离开已进行过编辑但未保存的页面时,系统会给出提示。这个功能在许多应用程序中都非常实用,可以帮助避免用户意外丢失...

    ajax页面数据自动保存

    2. **事件驱动**:除了定时器,还可以结合页面事件(如`onblur`、`onchange`等)来触发数据保存,确保数据在用户离开或修改时被及时保存。 3. **数据校验**:在自动保存前,进行必要的数据校验,防止无效数据被保存...

    页面离开时检查表单是否改变

    总的来说,"页面离开时检查表单是否改变"这一功能是通过JavaScript和jQuery实现的,它利用事件监听和状态跟踪,确保用户在无意离开页面时有机会保存他们的工作。尽管现代浏览器对`beforeunload`事件的处理有所限制,...

    js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)

    总结起来,通过`window.onbeforeunload`事件,开发者可以创建一个用户体验良好的提示机制,来防止用户在未保存工作的情况下不小心离开页面。它不仅可以提醒用户进行保存,还可以提供额外的确认步骤,从而减少数据...

    VS2008最新智能提示补丁以及jquery文件(1.4.1)

    5. 保存项目设置,现在VS2008应该能识别并提供jQuery 1.4.1的智能提示。 这个过程不仅适用于VS2008,对于其他版本的VS和jQuery,也有类似的方法来增强IDE的智能提示功能。通过这种方式,开发者可以更高效地编写和...

    jquery中在一个页面中弹出编辑对话框的实例

    在jQuery中实现一个页面内的编辑对话框是一种常见的交互设计,它可以提供用户友好的界面来编辑数据,而无需离开当前页面。下面将详细讲解如何在页面中创建这样的功能,并结合给出的"弹出编辑框是实例"这个压缩包文件...

    前端项目-jquery.AreYouSure.zip

    在网页应用开发中,用户可能会在填写表单时意外离开页面,导致未保存的数据丢失。为了解决这个问题,开发者通常会使用“脏表单”检测功能,提醒用户有未保存的更改。`jQuery.AreYouSure` 就是一个专门用于此目的的轻...

    前端项目-jquery-idletimer.zip

    1. 用户离开页面检测:如果用户长时间未进行任何操作,可以假设他们可能已经离开了,此时可以清理资源、更新页面状态或发送离开页面的统计数据。 2. 自动保存草稿:在编辑器或表单中,可以设置idletimer来定期保存...

    jQuery摄像头插件jquery-webcam-plugin

    `jQuery webcam plugin`是一个优秀的JavaScript库,它利用jQuery框架实现了与浏览器摄像头的交互,让用户无需离开页面即可拍摄并处理照片。 该插件的核心特性包括: 1. **易用性**:基于jQuery的API设计使得该插件...

    jquery-Modal-Plug(jQuery模态框插件)

    1. **信息提示**:当用户需要接收重要通知或警告时,模态框可以提供一个清晰且引人注意的展示方式。 2. **表单填写**:在不离开当前页面的情况下,模态框可以用来显示和提交表单,提高用户体验。 3. **图片预览**:...

    jQuery 让A链接显示特效title

    这段代码首先获取每个A标签的title,将其保存并移除,然后创建一个自定义的提示框,当鼠标进入链接时快速显示,离开时快速消失。当然,你可以根据需要调整CSS样式和动画效果。 在实际项目中,源代码(源代码)可能...

    jquery.wordexport.js-master.zip

    这一特性极大地提高了用户体验,因为用户无需离开当前页面即可完成内容的保存。 要使用`jquery.wordexport.js`,首先需要在项目中引入该库。由于文件名为`jquery.wordexport.js-master.zip`,我们可以推断这是库的...

    jquery提示框效果之文章链接预览内容效果

    当鼠标离开链接时,提示框会自动隐藏。 请注意,为了使预览功能正常工作,目标页面应有一个类为`.article-preview`的元素包含文章的预览内容。如果目标页面结构不同,需要根据实际情况调整`load()`函数中的选择器。...

Global site tag (gtag.js) - Google Analytics