javascript - 在 onkeyup 事件中更改值时不会触发 onchange 事件

Question

概述:

我正在编写一个将文本框转换为时间输入框的 jquery 插件。这意味着它允许用户以 HH:MM 格式输入时间。此过程的一部分是在正确的位置插入一个冒号 (:)。在 keyup 上，我检查用户是否键入了 2 个数字，如果是，则在输入的值后附加一个冒号。

问题:

这种方法工作正常，除非有人在文本框上应用插件但也想有一个自定义的 onchange 处理程序。这个 onchange 处理程序不会在代码以编程方式更新文本框值时触发，也不会在文本框失去焦点时触发。

我的理解:

我猜的，如有错误请指正

• 也许文本框有一个内部"_value" (下划线 区别于公共(public)值属性) 包含 编辑开始前文本框中的值。当焦点离开 文本框，JS引擎检查文本框的当前值 匹配文本框的"_value"。如果它们不同，则 onchange 事件被触发。
• 也许使用常规 native 击键更改值不会修改 "_value" 只是值，所以 onchange 被触发。但或许 通过 JS 进行的值更改修改 both 值和 “_value” 和 所以 onchange 事件不会触发？

解决方法:

blur 事件触发，因为它与值无关。所以我可以明确地从模糊事件中触发变化事件。但我不想这样做，因为它是一种 hack 并且破坏了模糊和变化的语义。

相关链接:

我在 SO 上发现了几个具有相同问题但没有答案的链接(恕我直言)给出了优雅或正确的解决方案。 这是我看到的一些:

• Javascript : onchange event does not fire when value is changed in onkeyup event

• https://stackoverflow.com/questions/14410870/using-both-onchange-and-onkeyup-in-ie8

• Javascript: "onchange" event does not work with "value" change in "text input" object

简化代码:

$(document).ready(function () {
    $("input").keyup(function () {
        this.value = '*' + this.value;
        // this changes the value, but does not fire the onchange event
        // and it also does not fire it when the textbox loses focus.
        // blur fires though.
    });
    $("input").change(function () {
        alert('in change');
    });

    $("input").blur(function () {
        alert('in blur');
    });
});

fiddle :

http://jsfiddle.net/sajjansarkar/vHgst/4/

已测试的浏览器: IE8,10 和 Chrome。 适用于 FireFox(!!) (+1 Felix Kling)

Answer 1

您可以使用 jquery.trigger 以编程方式触发事件: http://jsfiddle.net/vHgst/5/

$(this).trigger('change');