在程序更改输入值时触发动作
在程序更改输入值时触发动作
我的目标是观察一个输入值，并在其值被“编程方式”改变时触发一个处理程序。我只需要适用于现代浏览器的方法。
我尝试了许多使用defineProperty的组合，这是我的最新尝试：
var myInput = document.getElementById("myInput");
Object.defineProperty(myInput, "value", {
get: function() {
return this.getAttribute("value");
},
set: function(val) {
console.log("set");
// 在这里处理值的改变
this.setAttribute("value", val);
}
});
myInput.value = "new value"; // 应该触发console.log和处理程序
这似乎做到了我所期望的，但感觉像是一个hack，因为我覆盖了现有的value属性并修改了value的双重状态（属性和属性）。它还破坏了不喜欢修改后的属性的change事件。
我尝试的其他方法：
- 一个setTimeout/setInterval循环，但这也不够干净
- 各种watch和observe polyfill，但它们在一个输入值属性上出现问题
有什么正确的方法可以实现相同的结果吗？
演示：http://jsfiddle.net/L7Emx/4/
【编辑】澄清一下：我的代码正在观察一个其他应用程序可以推送更新的输入元素（例如，作为ajax调用的结果，或者作为其他字段更改的结果）。我无法控制其他应用程序如何推送更新，我只是一个观察者。
【编辑2】澄清一下我对“现代浏览器”的理解，我对在IE 11和Chrome 30上工作的解决方案非常满意。
【更新】根据被接受的答案更新的演示：http://jsfiddle.net/L7Emx/10/
@mohit-jain建议的技巧是添加一个第二个用于用户交互的输入。