Question

假设您的页面上有一个简单的文本框和按钮。单击该按钮将更新文本框值：

HTML：

<input type="text" id="myText" val="" />
<input type="button" id="myBtn" value="Change TextBox Value" />

jQuery：

$("#myBtn").on('click', function() {
   $("#myText").val('adsf');
})

我想为文本框的change事件添加一个事件监听器，如下所示：

$('#myText').on('change', function(){
    alert('Changed!')
});

单击按钮时不会触发该警报，但是当您手动更改文本框值并将焦点移出时，它会被触发。

我知道您可以将$("#myText").trigger('change')添加到按钮的onclick事件中，但我希望只通过向文本框添加事件侦听器来实现此目的。

jsfiddle

由于

Answer 1

没有支持此类活动。您可以尝试的唯一方法是设置间隔或超时以检查值是否已更改（使用 data 存储临时值）：

var $myText = $("#myText");

$myText.data("value", $myText.val());

setInterval(function() {
    var data = $myText.data("value"),
        val = $myText.val();

    if (data !== val) {
        $myText.data("value", val);
        alert("changed");
    }
}, 100);

DEMO： http://jsfiddle.net/xZcAr/1/

Answer 2

为什么不在按下按钮时强制手动事件 -

$('#myText').on('change, blur',function(e){
    alert('Changed!');
});

$("#myBtn").on('click', function() {
    $("#myText").val('adsf');
    $("#myText").blur();
})

Answer 3

您需要连接两个处理程序。要重用处理程序，您可以将其提取到命名函数：

function showChanged(){
    alert('Changed!')
}

$("#myBtn").on('click', showChanged);
$("#myText").on('change', showChanged);

Answer 4

您只需使用keyup功能：

$( "#myText").keyup(function(){
   alert($(this).val());
});

Answer 5

您可以执行以下操作。而不是侦听输入字段，而是侦听同时更新的div更改。

function trigger(){
setTimeout(function(){ 
document.getElementsByName("Thing")[0].value = 'hello'
document.getElementById('myDiv').innerHTML = document.getElementsByName("Thing")[0].value 

}, 3000);
}

trigger()
document.getElementById("myDiv").addEventListener('DOMSubtreeModified', (e)=>{
  console.log(e.target.innerHTML)
 
});

<input type="text" name="Thing" value="" />
<div style="display:none;" id="myDiv"></div>

jquery检测文本框值更改不基于用户输入

5 个答案: