Question

如何在动态更改时检测输入值的更改。因为txt2上的更改清除了txt1中的值。我需要检测它已被清除或更改。

Onchange不会这样做。

<input id="txt1" type="text" onchange="SetDefault();" onpaste="this.onchange();" oninput="this.onchange();">
<br>



<input id="txt2" type="text" onchange="SetDefaultSecond();" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">

<script>
function SetDefault(){
      alert("Change1");
    }

function SetDefaultSecond(){
      $("#txt1").val('');
       alert("Change2");
}
</script>

Answer 1

您可以在清除第一个输入时手动触发输入事件，如下所示：

<input id="txt1" type="text">
<br>
<input id="txt2" type="text">

<script>
$("#txt1").on("input", function() {
    alert("Change1");
});

$("#txt2").on("input", function() {
    $("#txt1").val('').trigger('input');
    alert("Change2");
});
</script>

jsFiddle这里：https://jsfiddle.net/dr0oabj1/

Answer 2

您需要使用 oninput 事件来捕获对输入的任何更改。它会在每次由于输入/粘贴等因素值而发生变化时触发 onchange ＆amp; oninput 是onchange仅在焦点离开输入后触发，而oninput每次因任何原因而更改值时都会触发。

＆＃13;

function SetDefault(){
      alert("Change1");
    }

function SetDefaultSecond(){
      $("#txt1").val('');
       alert("Change2");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input id="txt1" type="text" oninput="SetDefault();" />
<br>



<input id="txt2" type="text" oninput="SetDefaultSecond();"/>

＆＃13;

Answer 3

试试这个：

$(document).ready(function(){

    $("#txt2").on("input",function(){

        $("#txt1").val('');
        console.log("Change2");

    })

    $("#txt1").on("input",function(){

        console.log("Change1");


    })
})

最终代码：

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
</head>
    
    <body>
        
        Text 1 : <input id="txt1" type="text">
        <br><br>
        Text 2 : <input id="txt2" type="text">
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
        $(document).ready(function(){

            $("#txt2").on("input",function(){

                $("#txt1").val('');
                console.log("Change2");

            })

            $("#txt1").on("input",function(){

                console.log("Change1");


            })
        })
    </script>
    </body>
</html>

＆＃13;

Answer 4

Kodies答案是正确的;试试这个超简单的例子，然后进入Detect all changes to a (immediately) using JQuery

＆＃13;

<input id="txt1" type="text" oninput="console.log('input')" onchange="this.oninput()">
<br>
<button onclick="eval(this.textContent)">console.log('clearing'); txt1.value=''</button>
<br>
<button onclick="eval(this.textContent)">console.log('clearing <b>and triggering</b>'); txt1.value=''; <b>txt1.onchange()</b></button>

＆＃13;

如何动态更改时检测输入的变化

4 个答案: