Question

我的代码基本上与以下一样

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

实际上，值在用户输入时正确格式化，但是当用户选中或单击输出字段时，不会触发onChange事件（因此视图不会更新）。如果我注释掉keyup事件处理函数的主体，一切都按预期工作（格式除外）。为什么会这样？

AFAIK，要触发的onchange事件需要满足two conditions：

必须通过触发onfocus事件（存储旧值）的内容进入控制/输入字段。
焦点上显示的值与“exit”/ blur

BTW，我尝试将代码更改为“模糊”，但如果我格式化字段，则不会触发。在测试时使用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();
})

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

2 个答案: