Question

我知道有很多关于“beforeunload”事件的问题，我想我读了大部分内容。所以我编写了以下代码来警告用户在保存数据之前离开页面，并且它大部分时间都可以工作。

当用户在输入“f1”中输入值并在跳出“f1”之前离开页面时，它不起作用。在这种情况下，beforeunload事件在更改事件之前触发，并且不发出警告。

我应该如何修改代码？

感谢

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
var g_page_changed = false;
$(document).ready(function(){
    $(window).bind('beforeunload', function() { 
        if (g_page_changed) {
            return 'Do you really want to leave without saving?' ; 
        }
    });

    $('input').change(function() {
        g_page_changed = true;
    });
});
</script>
<form id="frm">
 <input id="f1" name="f1" type="text"/>
</form>

Answer 1

在输入字段为blur d之前，不会触发更改事件，因此在条件修改之前触发输入blur：

var g_page_changed = false;


$(window).bind('beforeunload', function() {
    $('input').blur();
        if (g_page_changed) {
            return 'Do you really want to leave without saving?' ;
        }
    });

  $('input').change(function() {
        g_page_changed = true;
    });

示例：http://jsfiddle.net/niklasvh/XhT26/

Answer 2

你应该使用keypress（）而不是change（）并在其中添加一些额外的逻辑。

$('input').keypress(function() {
    var val = $(this).val();
    if (val.length > 0){
         g_page_changed = true;
    }else{
         g_page_changed = false;
    }
});

使用此代码检查输入字段的lemgth是否为＆gt; 0然后将变量设置为true或其他（如果用户取消了他输入的所有内容）将其重新设置为false。如果输入字段在页面加载时已经删除了一些文本，请查看检查输入“肮脏”的jquery插件。

只有当输入字段失去焦点时，才会触发更改事件。

在beforeunloadhow之前不会触发更改事件

2 个答案: