Question

我正在尝试使用以下脚本来检测表单中的任何字段是否已更改（编辑：检测我的表单字段的值是否已更改），如果是，则提醒用户。否则，将显示另一个js框。

但它没有检测到任何更改，并且永远不会显示确认框。我做错了什么？

$('#eventMedia').click(function() {
        var form_changed = false;

        $('#tribe-events > form').on('keyup change', 'input, select, textarea', function(){
            form_changed = true;
        });

        if (form_changed == true) {
            confirm('You have unsaved changes! Click Cancel to save your changes before continuing.');
        } else {
            $('#eventMediaBox').show();
            $('#blackFade').show();
        }
    });

Answer 1

只有在点击keyup按钮后，您才开始注册change和#eventMedia个事件，这可能不是所需的顺序。

代替：

// Set the boolean flag variable first
var form_changed = false;

// On `input change` events - set flag to truthy
$('#tribe-events > form').on('input change', 'input, select, textarea', function(){
    form_changed = true;
});

// Showtime!
$('#eventMedia').click(function() {
    if (form_changed) {
        alert('You have unsaved changes! Save your changes before continuing.');
    } else {
        $('#eventMediaBox, #blackFade').show();
    }
});

请注意，"input"事件（在.on('input change'中）也将涵盖用户使用鼠标等粘贴内容的情况......

此外，请不要忘记有时将form_changed重置为代码中的false ...

现在回想一下你的用户界面...我有一个问题。 “为什么？”。是的，如果用户没有在表单中更改任何内容，为什么要显示“SAVE”或#eventMedia呢？我的意思是，如果用户做了任何改变而没有理由做任何事情 - 对吗？

我认为这应该足够了：

> button is disabled="true"
> (User makes changes?) on `input change` make enabled.

检测表单是否已更改，脚本无法正常工作

1 个答案: