立即检测由JavaScript

Question

改性我想立即检测在输入类型的改变在一个变化=“文本”时，它的由JavaScript修改。当用户手动更改时，可以通过以下方式触发检测：

onchange="myfunction();" onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();" 

我只是无法弄清楚这一点。

Answer 1

你可能使用MutationObserver对象，允许观察属性的变化。但是，我不知道在执行el.value = ...而不是el.setAttribute('value', ...)时是否会调用回调。

您还可以使用Object.defineProperty为value属性定义自定义设置器。但是，我从来没有在DOM元素上做过，如果已经定义了一个setter，那么您可能需要确保新的setter调用它。如果有的话，你可以使用Object.getOwnPropertyDescriptor来获得当前的setter。

最后，作为最后的手段，你总是可以使用setInterval定期检查元素的value性质变了，但我真的不喜欢这种方法。但它可能是唯一的跨浏览器。

不幸的是，我现在不能测试任何这一点，但我会回来，后来更新这个答案。

Answer 2

正如你说你控制，改变它的代码，当你改变输入的内容，你可能只是触发更改事件。在jQuery它会是：

var textinput = //Perhaps $("input[type='text']") or $("#someid") 
textinput.val("New text here"); 
textinput.trigger("change"); 

而这将触发你绑定到你的onchange事件的任何功能。

如果你这样做往往不够，你可能只是想做出更新的价值和触发事件的函数。

没有jQuery的，这是一个有点复杂，但看看How can I trigger an onchange event manually?

编辑：

这里有一个完整的例子，再次使用jQuery。请注意，我使用javascript来设置处理程序，而不是实际用HTML指定它们，因为一般来说，这是更好的做法。

HTML：

<input type="text" id="toChange"> 

的Javascript：

function changeFunction() { 
    //Do whatever 
} 

$(document).ready(function() { 
    var inputbox = $("#toChange"); 
    inputbox.on('change', changeFunction); 
    inputbox.on('paste', changeFunction); 
    //Can attach other functions, though beware of multiple triggers 
}); 

//SetTimeout in place of whatever code does the changing 
window.setTimeout(function() { 
    var inputbox = $("#toChange") 
    inputbox.val("Set by function"); 
    inputbox.trigger("change"); 
}, 3000); 

JFiddle