jquery检测文本框值的变化不是基于用户输入

jquery detect textbox value change NOT based on user input

本文关键字：于用户 用户 输入 文本 检测 变化 jquery      更新时间：2023-09-26

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

HTML: 

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

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

我想为文本框的更改事件添加一个事件侦听器，如下所示:

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

当你点击按钮时，这个警告不会被触发，但当你手动改变文本框的值并将焦点移开时，它会被触发。

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

jsfiddle

谢谢

不支持此事件。您唯一可以尝试的是设置间隔或超时来检查值是否被更改(使用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);
演示:

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

当按钮被点击时，为什么不强制一个手动事件呢-

$('#myText').on('change',function(e){
    alert('Changed!');
});
$("#myBtn").on('click', function() {
    $("#myText").val('adsf');
    $("#myText").change();
})

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

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

您只需使用keyup函数:

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

您可以这样做。与其监听输入字段，不如监听同时得到更新的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>

相关文章：