javascript - 为什么格式化输入字段会阻止 onChange 事件发生

Question

我有一些代码基本上如下所示

.on("keyup", "input", function (e) {
    this.value = utils.formatNumber(this.value);                    
})
.on("change", "input", function(e) {
    expensiveFunctionThatUpdatesView();
})

事实上，这些值的格式在用户键入时正确，但是当用户通过 Tab 键或单击离开输入字段时，不会触发 onChange 事件(因此 View 不会更新)。如果我注释掉 keyup 事件处理函数的主体，一切都会按预期工作(格式除外)。为什么会这样？

据我所知，有two conditions需要满足以下条件才能触发 onchange 事件:

1. 必须通过触发 onfocus 事件(存储旧值)的方式进入控制/输入字段。
2. 聚焦时出现的值与“退出”/模糊时出现的值不同

顺便说一句，我尝试将代码更改为“模糊”，但如果我格式化字段，也不会触发该代码。测试时使用 Chrome。

Answer 1

通过 javascript(或通过 val()/text() 的 jQuery)设置文本框值永远不会触发浏览器更改事件。您需要保存原始值，将其与后格式值进行比较，并以编程方式触发更改:

.on("keyup", "input", function (e) {
    var originalValue = this.value;
    var newValue = utils.formatNumber(originalValue);

    this.value = newValue;

    if (originalValue !== newValue) {
        $(this).trigger('change');
    }
})