Question

当脚本更改输入类型文本的值时，是否有办法获得通知。

我有

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

和脚本

document.getElementById('test').value = 'bbb';

我希望收到有关文本更改的通知。

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

非常感谢

P.S。请不要JQuery，或者jquery可以解释它是如何实现的。

Answer 1

如果您正在使用现代浏览器，可以尝试使用以下内容：

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基本功能的极具破坏性的。记住这一点。

Answer 2

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

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

当以编程方式更改值时，只听取change事件很容易出错。但是，由于您要更改该值，请添加两行并使用CustomEvent激活更改事件。

然后您就可以捕获此change事件，内联：

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

或与听众：

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

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

然而，这取决于您自己以编程方式更改输入的值。如果您正在使用更改输入值的库（例如datepickr），则可能需要输入代码并在正确的位置添加这两行。

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

2 个答案: