5

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

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

我就是想不通这个。

4

2 回答 2

3

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

编辑：

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

提琴手

于 2013-08-29T22:14:21.607 回答
1

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

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

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

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

于 2013-08-29T21:45:27.517 回答