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

Question

我基本上有一些代码，例如以下

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

作为用户类型，值正确地格式化为用户类型，但是当用户选项卡或单击输入字段时，未触发onChange事件（因此，视图未更新）。如果我评论关键事件处理程序功能的主体，一切都按预期工作（格式化除外）。为什么这样？

afaik，要触发onchange事件需要满足两个条件：

1. 必须通过触发onfocus事件的东西（存储旧值）输入控件/输入字段。
2. 焦点上存在的价值与"退出"/blur
上存在的价值不同

顺便说一句，我尝试将代码更改为" Blur"，但是如果我格式化字段，则不会触发。在测试此测试时使用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');
    }
})

Answer 2

您可以触发两个事件的相同回调函数以启用数字格式：

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