我有一个简单的表格和一个重置按钮。如果表单字段是默认值,我想在重置按钮中添加一个类。
我把这段代码组合在一起,效果很好,唯一的问题是它设置为更改并在点击时重置按钮切换类。因此,如果某人将输入字段更改为默认值而未按下重置按钮,则重置按钮将保持原样。
有没有办法检测表单字段是否为默认值?然后根据那个添加类?这是我的代码;
按钮
<button type="reset" class="myreset">Reset</button>
脚本
$("#myform input").change(function() {
$(".myreset").addClass("blue");
});
$(".myreset").click(function() {
$(this).removeClass("blue");
});
答案 0 :(得分: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或change事件)上将先前存储的表单序列化状态与新序列状态进行比较。通过这种方式,您可以随时说出表格是否处于原始状态。
我还添加了重置按钮的事件。它使代码更加不引人注目:您可能不仅想要更改类名而是执行其他操作,而$form.find('input, textarea')
侦听器不必知道重置按钮究竟发生了什么。
答案 1 :(得分:0)
$("#myform input").change(function() {
if($(this).val() == $(this).prop("defaultValue"))
$(".myreset").addClass("blue");
});
$(".myreset").click(function() {
$(this).removeClass("blue");
});
更新工作Fiddle