输入值转换器覆盖change.trigger事件

Question

我有一个输入字段，可以接受10个连续的数字，并在输入最后一位数字后将该数字格式化为电话号码xxx-xxx-xxxx格式。 IT还允许用户以上述格式输入数字以及10位数序列。

一旦用户更改了值，我也会出现一个弹出窗口（在这种情况下，如果该值与用户选中/单击该字段时的值不同）。由于我添加了值转换器，每当数字格式化为第10位时，更改事件不再触发。奇怪的是，如果用户以最终最终的格式输入数字，事件将按预期触发。

电话format.js

export class PhoneNumberValueConverter {
  toView(value) {
    return value.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
  }
}

输入字段

    <input id="phNumber" value.bind="phone | phoneFormat" change.trigger="showModal();"></input>

的ShowModal（）;

    showModal() {
        if(this.hasChanged && this.yesRadio){
            $('#updateModal').modal();
        }
    }

值转换器是否触发了一个在场上优先于我​​自己的更改事件？

Answer 1

根据MDN，当输入元素的值发生变化后，输入元素失去焦点时，应该触发change事件。

当输入第10个数字时，您的值转换器会格式化该值，从而使绑定系统将格式化的值应用于输入。因为在输入失去焦点之前发生的最后一件事是以编程方式设置的值（vs通过用户输入），不会满足要触发的change事件的条件。

尝试使用blur事件，因为您的更改处理程序已经在检查值是否已更改。