jQuery記住多個focusin事件上的原始文本框值

Question

很難正確地進行解釋，所以這里有一些小提琴 。

我有一個帶有多個input:text和一個button:submit 。 更改任何表單控件后，都會啟用“提交”按鈕。 同樣，文本框onchange將獲得帶有addClass的新黃色background-color ，以指示該值已更改。 原始值存儲在focusin事件上，然后與新值onchange 。

但是，我的目標是當我更改文本框值並再次聚焦時，我希望原來的舊值保持不變，以便可以重置背景色。

提前致謝

Answer 1

您可以使用defaultValue屬性

 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(); }); 

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

 <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> 

---

如果要使代碼正常工作，請使用數據屬性一次存儲原始值

 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(); }); 

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

 <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> 

Answer 2

使用data-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

我不確定我是否理解您的問題。 就是這是什么找你想達到什么目的？

您需要在focusin事件中刪除類。