Javascript 如果表单字段为默认值,是否将类添加到按钮?

Javascript 如果表单字段为默认值,是否将类添加到按钮?,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我有一个简单的表单和一个重置按钮。如果表单字段是默认值,我想向重置按钮添加一个类 我编写了这段代码,效果很好,唯一的问题是它被设置为on change,并在单击时重置按钮切换类。因此,如果有人在不按下重置按钮的情况下将输入字段更改回默认值,重置按钮将保持原样 是否有方法检测表单字段是否为默认值?然后在这个基础上添加类?这是我的密码 钮扣 <button type="reset" class="myreset">Reset</button> 更新:工作我会让它更抽象,但更

我有一个简单的表单和一个重置按钮。如果表单字段是默认值,我想向重置按钮添加一个类

我编写了这段代码,效果很好,唯一的问题是它被设置为on change,并在单击时重置按钮切换类。因此,如果有人在不按下重置按钮的情况下将输入字段更改回默认值,重置按钮将保持原样

是否有方法检测表单字段是否为默认值?然后在这个基础上添加类?这是我的密码

钮扣

<button type="reset" class="myreset">Reset</button>

更新:工作

我会让它更抽象,但更灵活。考虑这个代码:

var $form = $("#myform"),
    $reset = $form.find(".myreset");

// Store initiale state
$form.data('reset', $form.serialize());

// Listen change and keyup events
$form.find('input, textarea').on('change keyup', function() {
    var clear = $form.serialize() == $form.data('reset');
    $reset.trigger(clear ? 'click' : 'dirty');
});

// Reset button events
$reset.on({
    dirty: function() {
        $(this).addClass('blue');
    },
    click: function() {
        $(this).removeClass('blue');
    }
});
其关键思想是在每次输入更改(keyup或change事件)上将以前存储的表单序列化状态与新的状态进行比较。通过这种方式,您可以随时判断窗体是否处于原始状态

我还向重置按钮添加了事件。它使代码更加不引人注目:您可能不仅想更改类名,还想做其他事情,
$form.find('input,textarea')
侦听器不必知道重置按钮的具体情况


演示:能否显示表单的相关HTML以及按钮类所基于的输入?可以这样检查:if($('#myform input').val('default#u value')){..to do something..}
 $("#myform input").change(function() {
        if($(this).val() == $(this).prop("defaultValue"))
            $(".myreset").addClass("blue"); 
        });

        $(".myreset").click(function() {
            $(this).removeClass("blue"); 
        });
var $form = $("#myform"),
    $reset = $form.find(".myreset");

// Store initiale state
$form.data('reset', $form.serialize());

// Listen change and keyup events
$form.find('input, textarea').on('change keyup', function() {
    var clear = $form.serialize() == $form.data('reset');
    $reset.trigger(clear ? 'click' : 'dirty');
});

// Reset button events
$reset.on({
    dirty: function() {
        $(this).addClass('blue');
    },
    click: function() {
        $(this).removeClass('blue');
    }
});