HTML：如何监听输入框的所有更改，而不仅仅是键盘输入的更改？

Question

例如，如果我有这样一个输入：

<input id="myInput" type="text" />

当值被程序更改时（例如，由于 $（“#myInput”）.val（“new value”）的结果），我该如何收到通知？

例如：http://jsfiddle.net/2ax9y/ 请注意，该问题询问如何“监听更改”，而不是“如何手动分派更改”。我很清楚我可以手动分派更改事件，但我正在尝试避免这样做。

- David Wolever

---

请查看此答案：https://dev59.com/GFzUa4cB1Zd3GeqP4505#7905958 - Rob W

可能是 检测 DOM 变化 的重复问题。 - Marc B

@MarcB 那个“重复”的问题完全不同。这个问题是要求值的更改，而不是DOM修改。 - Rob W

修改元素的值是一种DOM更改。 - Marc B

@RobW，这取决于“手动”触发更改...我知道我可以这样做，但我想避免这种情况，因为它会导致不愉快的错误。 - David Wolever

@DavidWolever 这有点不同。它是一个紧凑的jQuery插件，结合了.val和.change两个功能。如果你想要检测变化，你要么使用一个轮询器（！！！），要么使用MarcB建议的方法。 - Rob W

Answer 1

您可以更改$原型，以便每次调用val(value)时始终触发change()事件：

$.prototype.changeval = $.prototype.val;
$.prototype.val = function(v) {
    if (v) {
        $(this).changeval(v);
        $(this).change();
    } else {
        return $(this).changeval();
    }
}

- jzila

---

请注意：如果您计划在刚刚更改的对象的change()处理程序中调用val(value)，则不要使用此选项。例如：$("#foo").change(function(e) { $(this).val("bar"); }); - jzila

Answer 2

你不能可靠地订阅输入元素上的每一个更改，但是你可以检查自上次检查以来是否有更改，并在一些所需的时间粒度内执行该操作。

创建一个检查函数并使用你所需的时间粒度循环它——100毫秒是一个不错的开始，根据你的需要进行调整。

假设未经测试的实现：

var last_value = null;

function handle_changed() {
    // Do something here
}

function check_value() {
    var v = $("#myelement").val();
    if(v !== last_value) {
        last_value = v;
        handle_changed();
    }
}

setInterval(check_value, 100);

- shazow

Answer 3

触发更改：http://jsfiddle.net/maniator/2ax9y/1/

---

有点不同：http://jsfiddle.net/maniator/2ax9y/2/

- Naftali

---

@DavidWolever 看看我的第二小提琴。 - Naftali

额...这不是完全一样的吗，只是手动分派的“change”事件从其他地方手动分派？ - David Wolever

@DavidWolever 的第二种方法要求只在一个地方编写。它基本上将 click 和 change 绑定在一起。 - Joseph Marikle

@DavidWolever 目前只有这种方法可以实现。你需要在可能需要它们的地方附加处理程序。 - Naftali

@DavidWolever 你可以使用相同的 bind 函数绑定多个事件。 - Naftali

Answer 4

我认为这不是改变事件的固有能力。当您以编程方式更改值时，可以手动触发更改事件。

$("#myInput").val(+(new Date())).change();

- Joseph Marikle