Question

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

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

我只是想不出这个。

Answer 1

正如您所说，您控制了更改它的代码，您可能只是在更改输入内容时触发更改事件。在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

Answer 2

您可以使用允许观察属性更改的MutationObserver对象。但是，当您执行el.value = ...而不是el.setAttribute('value', ...)时，我不确定是否会调用回调。

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

最后，作为最后的手段，您总是可以使用setInterval来定期检查元素的value属性是否发生了变化，但我并不喜欢这种方法。但它可能是唯一的跨浏览器。

不幸的是，我现在无法测试任何此类内容，但我会稍后再回复并更新此答案。

立即检测由JavaScript修改的<input type =“text”/>中的更改

2 个答案: