Javascript 如何检测输入文本字段中的更改并启用“保存”按钮

我试图编写一个函数，它检测文本字段中的更改并启用“保存”按钮

这是在Visual Studio 2017、HTML和JavaScript中运行的

(function () {


    var customer_address = localStorage.getItem("customer_address");
    var customer_city = localStorage.getItem("customer_city");
    var customer_postal_code = localStorage.getItem("customer_postal_code");



    //Address Section
    function changeAddress() {
        var oldaddress = $("#txtOldAddress").val();
        var newaddress = $("#txtNewAddress").val();


        var url = serverURL() + "/savenewaddress.php";

        var JSONObject = {
            "customer_username": localStorage.getItem("customer_username"),
            "oldaddress": oldaddress,
            "newaddress": newaddress,
        };

        $.ajax({
            url: url,
            type: 'GET',
            data: JSONObject,
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (arr) {
                _changeAddressResult(arr);
            },
            error: function () {
                alert("FAIL");
            }
        });
    }

    function _changeAddressResult(arr) {
        if (arr[0].result === 1) {
            /*localStorage.setItem($("#txtNewPassword").val(), customer_username);*/
            alert("OK!")
        }
        else {
            alert("FAIL2");
        }
    }

    //City Section
    function changeCity() {
        var oldcity = $("#txtOldCity").val();
        var newcity = $("#txtNewCity").val();

        var url = serverURL() + "/savenewcity.php";

        var JSONObject = {
            "customer_username": localStorage.getItem("customer_username"),
            "oldcity": oldcity,
            "newcity": newcity,
        };

        $.ajax({
            url: url,
            type: 'GET',
            data: JSONObject,
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (arr) {
                _changeAddressResult(arr);
            },
            error: function () {
                alert("FAIL");
            }
        });
    }

    function _changeAddressResult(arr) {
        if (arr[0].result === 1) {
            /*localStorage.setItem($("#txtNewPassword").val(), customer_username);*/
            alert("OK!")
        }
        else {
            alert("FAIL2");
        }
    }

    //Postal Code Section
    function changePostalCode() {
        var oldpostalcode = $("#txtOldPostalCode").val();
        var newpostalcode = $("#txtNewPostalCode").val();

        var url = serverURL() + "/savenewpostalcode.php";

        var JSONObject = {
            "customer_username": localStorage.getItem("customer_username"),
            "oldpostalcode": oldpostalcode,
            "newpostalcode": newpostalcode
        };

        $.ajax({
            url: url,
            type: 'GET',
            data: JSONObject,
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            success: function (arr) {
                _changeAddressResult(arr);
            },
            error: function () {
                alert("FAIL");
            }
        });
    }

    function _changeAddressResult(arr) {
        if (arr[0].result === 1) {
            /*localStorage.setItem($("#txtNewPassword").val(), customer_username);*/
            alert("OK!")

        }
        else {
            alert("FAIL2");
        }
    }


    //Validation
    $("#ChangeAddressForm").validate({
        rules: {
            txtNewPostalCode: {
                required: true,
                minlength: 6,
                digits: true
            },

            txtNewCity: {
               digits: false
            },
            txtNewAddress: {
                required: true,
                alphanumeric: true
            }

        },
        messages: {
            txtNewAddress: {
                required: "Address is required",
            },
            txtNewCity: {
                required: "City is required",
                digit: "Include only letters!",
            },
            txtNewPostalCode: {
                required: "Postal Code is required!",
                minlength: "Postal Code only contains 6 digits!",
                digits: "Postal Code only contains digits!"
            }
        },
        focusInvalid: false,
        submitHandler: function () {
            return false;
        },
        errorPlacement: function (error, element) {
            error.appendTo(element.parent().parent().after());
        },
    });



    //Save Address Button Function
    $("#btnSaveAddress").bind("click", function () {

        if ($("#ChangeAddressForm").valid()) {
            changeAddress();
            changeCity();
            changePostalCode();



        }
    });

})();

---

我希望当3个字段中的文本框发生更改时，输出将启用submit按钮。如果没有更改，则如果存在相同的文本，则按钮将被禁用。

您可以在每次输入更改时调用一个函数，然后检查是否输入了所有输入

例如：

<input id = "input1" onchange ="checkIfAllInputsEntered()"/>
<input id = "input2" onchange ="checkIfAllInputsEntered()"/>
<input id = "input3" onchange ="checkIfAllInputsEntered()"/>

---

Onchange通常只在输入更改焦点时触发一次。 所以您需要使用onkeyup事件。 但您也可以添加onchange和onkeydown以防万一。 我假设您正在使用jQuery。 下面是一个例子：

var old1;
var old2;
var old3;

function checkForChange() {
  if (
    old1 != $('#in1').val() ||
    old2 != $('#in2').val() ||
    old3 != $('#in3').val()
  ) {
    $('#save').show();
  }
}
$(function() {
  old1 = $('#in1').val();
  old2 = $('#in2').val();
  old3 = $('#in3').val();
});








我试图编写一个函数，它可以检测文本中的变化
字段并启用“保存”按钮

首先，在按钮标签中添加“disabled”属性。然后在按钮中添加一个“onchange”事件。在
js中
这样做：

function ontextchanged()
    $('#buttonid').prop('disabled',false);

请尝试以下代码：


函数InputChangeListener（）{
flag=1；
var firstInput=document.getElementById（“firstInput”）；
var secondInput=document.getElementById（“secondInput”）；
var thirdInput=document.getElementById（“thirdInput”）；
var firstInputVal=document.getElementById（“firstInput”）.defaultValue；
var secondInputVal=document.getElementById（“secondInput”）.defaultValue；
var thirdInputVal=document.getElementById（“thirdInput”）.defaultValue；
var submitButton=document.getElementById（“submitButton”）；
if（firstInput.value==firstInputVal | | secondInput.value==secondInputVal | | thirdInput.value==thirdInputVal）{
flag=0；
}
如果（标志==1）{
submitButton.style.display=“block”；
}否则{
submitButton.style.display=“无”；
}
}
#提交按钮{
显示：无
}






您好，谢谢您的回答，但我找不到输入文本是否为空。但我正在查找包含现有文本的输入字段，如果现有文本发生变化，则启用“保存”按钮，这样您就知道每个输入字段的现有文本了吗？如果您知道所有现有文本，则可以检查值是否为“某个现有文本”，而不是为空或者不是，如果它不是现有的文本，那么翻转flagHi感谢您的回答，非常有用！但我需要在任何一个字段更改时显示该按钮。并非所有3个按钮都需要更改才能显示
function ontextchanged()
    $('#buttonid').prop('disabled',false);