Question

我有以下代码......

    var leave_page_confirm=false;

    if ($(':input.common_class').val().length !== 0) {

        var leave_page_confirm=true;

    }

    window.onbeforeunload = save_data_check;

      function save_data_check()
      {

        if (leave_page_confirm) {
          return "You have unsaved information on the page.";

        }

      }

我正在尝试查看页面上的任何输入是否有价值。如果没有，那么您可以在没有消息的情况下离开页面。如果他们这样做，那么您会询问是否要离开该页面。我页面上的所有输入都有一个共同的类。

Answer 1

因为你使用jQuery已经使用了每个。

var leave_page_confirm = true;

$('.common_class').each(function(){
    if($(this).val().length == 0)
        leave_page_confirm = false
});

如果其中任何一个为false，也检查false，它将始终返回false，而不是担心检查每一个并设置true或false。 1空时总是假的。

Answer 2

关于我所遵循的逻辑的一些信息：
如果您需要使用JS存储一些信息，此代码不会保存任何内容，因此在客户端计算机上这取决于缓存，您可以使用cookie（这些信息是临时的，因为依赖于可以使用的cookie被删除，所以也许您可以存储未保存的值以等待用户提交它们。）第一个片段基于以下想法：一旦您保存信息就不会清除输入（它们将保留信息），这意味着js检查用户是否对其进行了任何更改（可以更聪明，也许检查是否一旦用户离开页面，然后检查var，则将值设置为true/false。

第二个脚本基于输入是表单或类似内容的一部分的想法，因此一旦提交，输入将被清除。如果用户离开页面，则代码检查是否为非空（保存或未保存）值。

总结一下：

首先检查是否已对输入进行了任何更改
第二个检查如果输入包含值

我不了解未保存的数据：未保存的数据或空值？我的意思是如果用户保存非空值然后清理输入？

这就是我的想法：基本上每次输入更改时它都会将saved var设置为false，一旦您点击按钮保存（或其他所有逻辑），它会将值设置为true ，否则一旦卸载页面，脚本就会检查var以查看它是true还是false
HTML：

<input type='input' class='test' />
<input type='input' class='test' />
<input type='input' class='test' />
<input type='input' class='test' />
<input type='input' class='test' />
<input type='input' class='test' />
<button class='save'>Save</button>

JQUERY

var saved= true;

window.onbeforeunload = function () {
    if (!saved) {
        return 'Would you like to save?';
    }
};

$('.test').on('input', function(){
    saved=false;
 });

$('.save').click(function(){
    saved=true;
});

如果您只需要检查输入值：

window.onbeforeunload = function () {
    var saved= true;
    $('.test').val(function(e,v){
            //This check if the value is not empty
            //if you want any kind of value use if(v)
            if(v.trim()!=""){
                saved=false;
                return;
            }
        });
    if(!saved)
        return 'Would you like to save?';
};

即使使用纯粹的js，你也可以实现这个目标：

window.onbeforeunload = function () {
    var saved= true,
        items= document.getElementsByClassName('test'),
        count= items.length;

    for(i=0;i<count;i++){
        if(items[i].value!=""){ //if(items[i].value)
                saved=false;
                break;
            }
        };
    if(!saved)
        return 'Would you like to save?';
};

编辑COOKIE PART - 固定 - 作品

$(document).ready(function() {
            var cookieVal = getCookie('formValue');
            if(cookieVal){
                var list=$.parseJSON(cookieVal);
                $('.test').each(function(){
                    if($(this).attr('name') in list)
                        $(this).val(list[$(this).attr('name')]);
                });
                document.cookie = 'formValue=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
            }
        });

        window.onbeforeunload = function () {
            var saved= true;
            $('.test').each(function(){
                    if($(this).val().trim()!=""){
                        saved=false;
                        return;
                    }
                });
            if(!saved){
                var itemObj= new Object,
                    d = new Date();
                d.setTime(d.getTime() + (30*24*60*60*1000));

                var expires = "expires="+d.toUTCString();
                $('.test').val(function(e,v){
                    if($(this).attr('name'))
                        itemObj[$(this).attr('name')]=v;
                });
                itemObj=JSON.stringify(itemObj);
                document.cookie = 'formValue=' + itemObj + "; " + expires;

                return 'Would you like to save?';
            }
        };

        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for(var i=0; i<ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1);
                if (!Array.prototype.indexOf) {
                    Array.prototype.indexOf = function(obj, start) {
                        for (var i = (start || 0), j = this.length; i < j; i++) {
                            if (this[i] === obj) { return i; }
                        }
                        return -1;
                    }
                }
                if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
            }
            return "";
        }

Answer 3

一种粗暴的方式

var leave_page_confirm=false;
$('input').each(
    function(){
        if($(this).val()){
        leave_page_confirm = true;
        }
    });

Answer 4

试试这个

var changesSaved =true;
    function hasPendingChanges()
    {
    changesSaved=$(':input.common_class').val().length == 0;
    }
    window.onbeforeunload = save_data_check;
    function save_data_check()
          {

            if (!changesSaved) {
              return "You have unsaved information on the page.";

            }
}

Answer 5

我通常使用change事件来跟踪任何输入已更改为，

var leave_page_confirm = false;
    $(function() {
        $(':input.common_class').change(function(){             
            leave_page_confirm = true;
            if(!leave_page_confirm)
            window.onbeforeunload = save_data_check;
        });
    });

    function save_data_check(){        
          return "You have unsaved information on the page.";
    }

检查用户是否在JQuery中有未保存的数据？

5 个答案: