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

【问题标题】：Why does formatting an input field prevent onChange event from occurring为什么格式化输入字段会阻止 onChange 事件发生
【发布时间】：2012-10-13 09:48:02
【问题描述】：

我有一些代码基本上如下

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

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

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

一定是通过触发 onfocus 事件（存储旧值）的东西进入了控制/输入字段。
focus 上的值与“exit”/blur 上的值不同

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

【问题讨论】：

stackoverflow.com/questions/2247386/…, stackoverflow.com/questions/4672505/…

标签： javascript jquery event-handling

【解决方案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');
    }
})

【讨论】：

但在某种程度上，用户已经通过输入文本（在格式化之前）触发了浏览器事件。我想这种情况取决于浏览器实现来决定 - Firefox 实际上会触发 change()，而 WebKit 不会。

【解决方案2】：

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

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

【讨论】：

不，这会触发太多对 updateView() 的调用。 updateView() 是一个触发大量服务器端活动的昂贵函数。将使用此信息进行更新。
我感兴趣的是为什么，而不是如何:-)
@oligofren 我猜“为什么”是 jQuery 内部。试过在their forums上问这个问题吗？