正在检测表单是否已更改，脚本是否不起作用

Detecting if form has changed, script not working

本文关键字：是否 脚本 不起作用 检测 表单      更新时间：2023-09-26

我正在尝试使用以下脚本来检测表单中是否有字段发生了更改（编辑：检测表单字段的值是否发生了更改），并在发生更改时提醒用户。否则，将显示另一个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();
        }
    });

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

相反：

// 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。。。

现在回想一下你的UI。。。我有个问题。"为什么？"。是的，如果用户没有更改表单中的任何内容，为什么要显示"SAVE"或#eventMedia所做的任何操作？我的意思是，如果用户做了任何更改，就没有理由做任何事情——对吧？

我认为这就足够了：

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