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

【问题标题】：jquery detect textbox value change NOT based on user inputjquery检测文本框值的变化不是基于用户输入
【发布时间】：2013-04-09 12:13:56
【问题描述】：

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

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

谢谢

【问题讨论】：

澄清一下 - 您希望通过手动更改文本框和单击按钮来触发警报？
他希望警报不是由点击本身触发，而是由文本框中的更改触发。
汉莱特是正确的。任何地方的任何变化
@Sammy，只是出于好奇，你到底想用这个来完成什么？顺便说一句，以前有人问过这个问题，但没有提供真正的答案，我猜这个问题也会发生同样的情况：stackoverflow.com/questions/1481152/…
@HanletEscaño，我在页面上有一堆文本框，这些文本框会根据各种操作（不一定是用户输入）进行更新。我需要知道这些文本框何时更新。由于有几种方法可以更新文本框，我试图避免为每个文本框添加手动触发，但似乎我别无选择。

标签： javascript jquery

【解决方案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);

演示： http://jsfiddle.net/xZcAr/1/

【讨论】：

好主意，但是，如果页面上有很多文本框，我不确定页面会受到什么样的影响。
@VisionN - 感谢您的帮助。我会接受这个作为答案，因为它在技术上可以工作，但不是首选方法，除非我按照你的建议进行手动触发。
这是迄今为止看起来最简单、最干净的解决方案。唯一的问题似乎是性能。 setIntervalMethod 最终会阻塞网页并使其变慢吗？
@SexyBeast 不，不会。现代 CPU 可以轻松处理多个后台任务，而不会影响总体性能。而且，100毫秒的间隔足够长，不会让网页变慢。

【解决方案2】：

为什么不像这样单击按钮时强制手动事件 -

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

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

【讨论】：

触发更改是一个不错的选择，只要常规事件没有触发。

【解决方案3】：

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

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

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

【讨论】：

谢谢肯尼斯。这会起作用，但我只希望通过向文本框而不是按钮添加事件侦听器来完成此操作
这件事除了自己提出来恐怕是不可能的

【解决方案4】：

你只需要简单地使用keyup函数：

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

【讨论】：

【解决方案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>

【讨论】：