立即检测<输入类型＝“;文本“>通过JavaScript修改

Immediately detect changes in an <input type="text"> modified by JavaScript

本文关键字：文本 gt 修改 通过 JavaScript 类型 检测 lt 输入      更新时间：2023-09-26

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

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

我就是想不通这个。

正如您所说的，您可以控制更改它的代码，当您更改输入的内容时，您可以简单地触发一个更改事件。在jQuery中是：

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

这将触发您绑定到onchange事件的任何函数。

如果你经常这样做，你可能只想创建一个函数来更新值并触发事件。

如果没有jquery，它会稍微复杂一点，但看看如何手动触发onchange事件？

编辑：

这里有一个完整的例子，再次使用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);

J隐藏

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

您也可以使用Object.defineProperty为value属性定义一个自定义的setter。然而，我从未在DOM元素上执行过此操作，如果已经定义了setter，那么您可能需要确保新的setter也会调用它。您可能可以使用Object.getOwnPropertyDescriptor来获取当前的setter（如果有的话）。

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

不幸的是，我现在无法测试这些，但我稍后会回来更新这个答案。

相关文章：