Question

很难得到正确的解释，所以这里有点fiddle。

我有一个包含多个input:text和一个button:submit的表单。任何表单控件更改后，都会启用提交按钮。此外，文本框onchange会使用background-color获得一个新的花哨的黄色addClass，以表示该值已更改。原始值存储在focusin事件中，然后与新值onchange进行比较。

但是，我的目标是当我更改文本框值并再次聚焦时，我希望原始旧值不会更改，以便可以重置背景颜色。

提前致谢

Answer 1

您可以使用defaultValue属性

＆＃13;

var adminWeb = window.adminWeb || {};

adminWeb.dirtyHandling = (function() {
  var createView = function() {
    $("form")
      .each(function() {
        $(this).data("serialized", $(this).serialize());
      }).on("change input", 'input:text', function(e) {
        $(this).toggleClass("textbox-changed", this.value !== this.defaultValue);

        var $form = $(this).closest('form');
        $form.find("input:submit, button:submit")
          .prop("disabled", $form.serialize() === $form.data("serialized"));
      })
      .find("input:submit, button:submit")
      .prop("disabled", true);
  };

  return {
    init: createView
  };

})();

$(function() {
  adminWeb.dirtyHandling.init();
});

＆＃13;

.textbox-changed {
  background-color: rgba(255, 255, 0, 0.3)
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="" action="" method="post">
  <input type="text" value="Carl" name="firstname" id="firstname" />
  <input type="text" value="Johnson" name="lastname" id="lasttname" />
  <br />
  <br />
  <br />
  <br />
  <br />
  <button id="submit-data" disabled="" type="submit">Save changes</button>
</form>

＆＃13;

如果要使代码正常工作，请使用数据属性存储原始值

＆＃13;

var adminWeb = window.adminWeb || {};

adminWeb.dirtyHandling = (function() {
  var createView = function() {
    $("form")
      .each(function() {
        $(this).data("serialized", $(this).serialize());
      }).on("focusin input:text", function(e) {
        var $t = $(e.target);
        var dvalue = $t.data('default-value');
        if (typeof dvalue == 'undefined') {
          $t.data('default-value', $t.val())
        }
      }).on("change input", function(e) {
        var txt = $(e.target);
        if (txt.is("input:text")) {
          txt.addClass("textbox-changed");
          if (txt.val() === txt.data('default-value')) { //oldVal comparison
            //should allways be same
            txt.removeClass("textbox-changed");
          }
        }

        $(this)
          .find("input:submit, button:submit")
          .prop("disabled", $(this).serialize() === $(this).data("serialized"));
      })
      .find("input:submit, button:submit")
      .prop("disabled", true);
  };

  return {
    init: createView
  };

})();

$(function() {
  adminWeb.dirtyHandling.init();
});

＆＃13;

.textbox-changed {
  background-color: rgba(255, 255, 0, 0.3)
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="" action="" method="post">
  <input type="text" value="Carl" name="firstname" id="firstname" />
  <input type="text" value="Johnson" name="lastname" id="lasttname" />
  <br />
  <br />
  <br />
  <br />
  <br />
  <button id="submit-data" disabled="" type="submit">Save changes</button>
</form>

＆＃13;

Answer 2

使用data-属性存储原始值并检查该属性以确定是否设置类。对每个值进行迭代以查看是否没有更改它们。有点像...

<input data-original="Carl" value='Carl' type='text' />
<input type='submit id='submit' />

var textInputs$ = $('[data-original]');

$('[data-original]').change(function (e) {
    var changed = false;
    $.each(textInputs$, function () {
        var self$ = $(this);
        if (self$.attr('data-original') != self$.val()) {
            self$.addClass('yellow');
            changed = true;
        }
    });

    if (changed) {
        $('#submit').removeAttr('disabled');
    }
    else {
        $('#submit').attr('disabled', 'disabled');
    }

});

Answer 3

我不确定我理解你的问题。 this你想要实现的目标是什么？

您需要删除focusin事件中的课程。

jQuery记住多个focusin事件的原始文本框值

3 个答案: