為什么格式化輸入字段會阻止onChange事件的發生

Question

我有一些基本上像下面的代碼

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

照原樣，這些值會按照用戶類型正確設置格式，但是當用戶在輸入字段中跳格或單擊時，不會觸發onChange事件（因此不會更新視圖）。 如果我注釋掉keyup事件處理程序函數的主體，則所有內容都會按預期工作（格式設置除外）。 為什么會這樣呢？

AFAIK，觸發onchange事件需要滿足兩個條件 ：

1. 必須通過觸發onfocus事件（存儲舊值）的某種方式進入控制/輸入字段。
2. 焦點上的值不同於“退出” /模糊上的值

順便說一句，我嘗試將代碼更改為“模糊”，但是如果我格式化該字段，也不會觸發該代碼。 在測試時使用Chrome。

Answer 1

通過javascript（或jQuery通過val() / text() ）設置文本框值將永遠不會觸發瀏覽器更改事件。 您需要保存原始值，將其與后格式值進行比較，然后以編程方式觸發更改：

.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();
})