微软输入法中文时，输入数字也会触发复合事件

2022年07月03日Web前端0

项目中没有直接可用的仅支持输入数字的指令，所以动手实现个，但是在测试过程中发现，windows系统中使用微软输入法在中文模式下就直接无法输入数字了。

正常实现

正常情况下，我们通过compositionstart和compositionend事件就可以做到对中文的限制。

@HostListener('compositionstart')
compositionstart() {
  this.lock = true;
}

@HostListener('compositionend')
compositionend(e) {
  // 恢复
  this.lock = false;
  // ....
}

@HostListener('input')
input() {
  if (this.lock) {
    return;
  }
  
  // ....
}

compositionstart触发表示中文输入开始，限制掉输入，直到compositionend触发后表示输入法结束。

微软输入法问题

在自测过程中发现，切换到微软输入法中文后，输入数字，特殊符号等等都能触发compositionstart事件。所以输入都被限制掉了。所以只做能做特殊处理了。

针对compositionend事件，可以获取到用户每次输入的单个字符，假如是数字则放行。

@HostListener('compositionend')
compositionend(e) {
  // 恢复
  this.lock = false;
  const newChar = e.originalEvent.data; // 新输入的字符
  const value = this.ngModel; // 当前输入的内容

  if (newChar.match(/^[\d-\.]$/)) { // 只有当是数字、点、负号的时候才处理，否则不处理
    // this.prev = this.handle(value); // 整个字符串处理
  }
}

这样的话就兼容处理了这个问题。

复合事件

目录