javascript - 使用 jquery 监控表单字段的变化

Question

尝试学习一些 jquery 来实现自动保存功能并需要一些帮助。我有一些代码来监视表单字段的状态，看看是否有任何变化。一切正常，但我只需要监视特定表单的更改，而不是页面上的所有表单输入。同一页面上有一个搜索框和一个时事通讯表单，当这些表单字段发生更改时，它们也会被检测到，我需要以某种方式或更好的方式过滤掉它们，只针对特定的表单。

$(function(){
    setInterval("CheckDirty()",10000);
    $(':input').each(function() {
        $(this).data('formValues', $(this).val());
    });
});

function CheckDirty()
{
    var isDirty = false;

    $(':input').each(function () {
        if($(this).data('formValues') != $(this).val()) {
            isDirty = true;
        }
    });

    if(isDirty == true){
        alert("isDirty=" + isDirty);
    }
}

Answer 1

只需在表单中添加一个类并使用它来过滤

$('.form :input').each(function() {
    $(this).data('formValues', $(this).val());
});

编辑

只是一个建议，可以直接把change事件附加到form上

现场演示:http://jsfiddle.net/jomanlk/kNx8p/1/

<form>
    <p><input type='text'></p>
    <p><input type='text'></p>
    <p><input type='checkbox'></p>
</form>

<p><input type='text'></p>

<div id='log'></div>

$('form :input').change(function(){
   $('#log').prepend('<p>Form changed</p>')
});

您可以通过添加计时器并使其每 xx 秒保存一次来轻松改进这一点。