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

Question

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

我还有一个弹出窗口，一旦用户更改值就会出现（在这种情况下，如果用户 tabs/clicks 离开该字段时值与以前不同）。因为我添加了值转换器，所以每当数字格式化为第 10 位时，更改事件就不再触发。奇怪的是，如果用户以最终将采用的格式键入数字，事件将按预期触发。

phone-format.js

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

输入字段

    <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 位数字时，您的值转换器会格式化该值，导致绑定系统将格式化值应用于输入。因为在输入失去焦点之前发生的最后一件事是以编程方式设置值（与通过用户输入相比），所以不满足 change 事件触发的条件。

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

inputs value converter overriding change.trigger event