输入框去空格指令兼容ios苹果系统中文输入法

本文介绍了一个针对iOS终端的前端Input指令，处理中文输入法空格分词以保持输入连续性。通过监听keydown、keyup和change事件，实现对键盘输入的特殊兼容处理。

export class InputXXXDirective {

  constructor(private elementRef: ElementRef, private control: NgControl) { }

  @HostListener('keydown', ['$event'])
  keydownFun(evt) {
    if (evt.key && evt.key.trim() === '') {
      const u = navigator.userAgent;
      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端:拼音通过空格分词(需要兼容)
      if (!isiOS) {
        evt.preventDefault();
      }
    }
  }

  @HostListener('keyup', ['$event', '$event.target'])
  keyupFun(evt, target) {
    if (evt.key && evt.key.trim() === '') {
      const u = navigator.userAgent;
      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端:拼音通过空格分词(需要兼容)
      if (isiOS) {
        this.keychangeFun(evt, target);
      }
    }
  }

  @HostListener('change', ['$event', '$event.target'])
  keychangeFun(evt, target) {
    const reg = /(\s+)/g;
    if (target.value && reg.test(target.value)) {
      this.control.control.setValue(target.value.replace(/(\s+)/g, ''));
      target.focus();
    }
  }

}

因为苹果IOS系统的中文输入法，是通过空格分隔拼音，如果去空格会打断中文输入法，造成输入混乱，所以需要进行兼容处理。