Javascript 检测输入类型文本上的编程更改

是否有一种方法可以在脚本更改输入类型文本的值时获得通知

我有

<input id='test' type='text' />

我想得到文本更改的通知

我知道我可能会收到keydown、keyup、onblur等的通知（如果我试图跟踪用户键入，它会起作用），但是如果更改是以编程方式完成的呢

非常感谢

p、 美国。

---

请不要使用JQuery，或者如果JQuery使用了它，请有人解释一下它是如何实现的。

如果您使用的是现代浏览器，您可以尝试以下方法：

var input = document.getElementById('test');
input._value = input.value;
Object.defineProperty(input, "value", {
    get: function() {return this._value;},
    set: function(v) {
        // Do your stuff
        this._value = v;
    }
});

---

如果您实际上不希望有任何用户输入（例如，隐藏类型输入字段），那么这个解决方案是很好的，因为它对DOM基本功能的破坏性极大。记住这一点。

我发现最简单的方法是手动触发事件：

document.getElementById('test').value = 'bbb';
var evt = new CustomEvent('change');
document.getElementById('test').dispatchEvent(evt);

当以编程方式更改值时，只听

change

事件容易出错。但是，由于您正在更改该值，因此添加两行并触发更改事件，并使用一个

然后您将能够捕获此

change

事件，可以是内联的：

<input id="test" onchange="console.log(this)">

这样做的好处是，如果您有一个用户可以更改的输入，那么您可以捕获这两个事件（来自用户或脚本）

---

然而，这取决于您自己以编程方式更改输入值这一事实。如果您使用的库（例如）更改了输入的值，那么您可能必须输入代码并在正确的位置添加这两行。

在调用document.getElementById（'test'）的脚本中。value='bbb'；你不叫警察吗function@555k我要注册的是什么？例如，如果我键入document.getElementById（'test'）.onkeyup=function（）{…}不起作用的话，一个想法是从domeElement“继承”，用getter和setter（如@MaxArt建议的）定义一个“value”-属性，在getter和setter内部使用原始的“value”-DomeElement的属性。@Zo72你对这个问题做了什么？你解决了什么？似乎当你重新定义

值

-属性时，输入字段不再“连接”到

值

-属性。@MaxArt这真是聪明。。。但是有副作用吗？我有点担心重新定义“价值”property@Zo72副作用主要是Jasd提到的，另外一个问题是，如果用户键入一个新值，你就无法检测他键入的内容，除非你要捕获每个关键事件并解释它。这已经是一团糟了，但如果你添加剪切/复制/粘贴事件，它会变得巨大。@MaxArt我非常喜欢它。我只是希望有人已经这么做了，并且有一个github片段。这似乎是相当低级的东西。我会做它，并测试它，如果它工作，我会标记最佳答案谢谢！它就像一个符咒。我只使用它来确定哪个脚本更改输入值<代码>设置：函数（v）{console.log（'input value改为'，v）；console.trace（）；this.\u value=v；}这个不能工作，那么我缺少什么呢？如果用户打开控制台并执行

$0.value=“asd”

（请参阅），那么该捕获如何更改？我们是否请求用户触发更改事件？：）@akinuri-Hmmm，我想我在你的评论中也漏掉了一些东西：）我的回答是为了解决在程序上触发更改事件的用例，也就是说，不是通过用户打开开发人员控制台，而是当javascript运行并更改输入值时，它可能无法使用$0的东西，我不太清楚。除此之外，它肯定是有效的，为什么不应该呢？@akinuri我相信你有点错了。在正常的文本输入中，用户被提到：“

我知道可以通过keydown、keydup、onblur等方式通知我（如果我试图跟踪用户输入，这会起作用），但是如果更改是以编程方式完成的呢？

”。这些事件是在与文本输入交互时触发的正常事件。公认的答案也将其视为用户与正常输入交互。公认的答案和我的答案都涵盖了最终用户输入以及编程更改。我认为我们的不同之处在于，我假设编程更改源自编写脚本的程序员，而你认为程序的变化源于用户咨询网页，这是最好的答案！我已经找了好几个月了！

<input id="test" onchange="console.log(this)">

document.getElementById('test').addEventListener('change',function(event) {
    console.log(event.target);
});