javascript - 如果表单字段是默认的，则将类添加到按钮？

Question

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

我把这段代码放在一起，效果很好，唯一的问题是它被设置为 on change and reset button switches class on click。因此，如果有人在没有按下重置按钮的情况下将输入字段更改回默认值，重置按钮将保持原样。

有没有办法检测表单字段是否为默认字段？然后根据那个添加类？这是我的代码；

按钮

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

脚本

            $("#myform input").change(function() {
                $(".myreset").addClass("blue"); 
            });

            $(".myreset").click(function() {
                $(this).removeClass("blue"); 
            });

Answer 1

我会让它更抽象一点，但更灵活。考虑这段代码:

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 或更改事件)时将以前存储的表单序列化状态与新的进行比较。这样您就可以随时判断表单是否处于原始状态。

我还为重置按钮添加了事件。它使代码更加不引人注目:您可能不仅想更改类名，还想做其他事情，并且 $form.find('input, textarea') 听众不必知道到底发生了什么重置按钮。

演示:http://jsfiddle.net/D5n8Y/