检测输入型文本方案变动

Question

是否有当脚本改变输入型文本的价值得到通知的方式。

我有

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

和脚本

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

我想通知文本的变化。

我知道我可以用的keydown，KEYUP，诸如此类的onblur通知，但有关在更改程序做了什么（如果我想跟踪用户打字其中工程）？

非常感谢

附：没有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事件，当值编程改变是容易出错。但是，由于要更改值，添加两行，并触发change事件，具有CustomEvent。

然后你就可以抓住这个change事件，无论是内联：

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

或向监听器：

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

这具有的优点是，如果有一个可以由用户来改变输入，你可以捕捉这两个事件（从用户或脚本）

然而，这依赖于事实，你是自己编程改变输入的值。如果您使用的是改变你的输入值库（如datepickr），你可以在代码即可获得，并在合适的地方添加这些两行。