Angular2 通过自定义指令限制输入框输入类型

** 温馨提示：如需转载本文，请注明内容出处。**
本文链接:https://www.cnblogs.com/grom/p/16814577.html

在input控件中，使用type="number"是无法控制科学计数"e"的输入的，并且会导致maxlength长度控制属性的失效，故编写自定义指令，以达到纯数字输入的需求。

• 构造函数里为dom添加type='number'属性限制除E/e外字母输入

• KeyDown事件限制键盘E按钮的输入

• Keyup和Change事件过滤字母e并对长度进行超长截取，这里主要为了防止复制过来的超长度或带e的字符串

<!--html-->
<input unumber [unumberlength]="22">

//TypeScript
import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[unumber]',
  host: {
    '(keydown)': 'OnKeyDown($event)'
  }
})
export class ValidNumberDirective {
  @Input() unumberlength: number;
  constructor(public el: ElementRef) {
    el.nativeElement.setAttribute('type', 'number')
  }

  OnKeyDown(e: any) {
    var keycode = (Number)(e.keyCode);
    if (keycode == 69) {
      e.returnValue = false;
    }
  }

  @HostListener('keyup') OnKeyup() {
    this.el.nativeElement.value = this.el.nativeElement.value.replace('e', '').replace('E', '');
    if (this.el.nativeElement.value.length > this.unumberlength) {
      this.el.nativeElement.value = this.el.nativeElement.value.slice(0, this.unumberlength);
    }
  }
  @HostListener('change') OnChange() {
    this.el.nativeElement.value = this.el.nativeElement.value.replace('e', '').replace('E', '');
    if (this.el.nativeElement.value.length > this.unumberlength) {
      this.el.nativeElement.value = this.el.nativeElement.value.slice(0, this.unumberlength);
    }
  }

}

• 为什么不在keydown里把字符串截取了：因为keydown的时候录入的字符还没有赋值到dom里去
• 为什么不在达到最大长度时禁止键盘输入：除非你不想要复制粘贴的功能可以把键盘上2个delete以外的按钮禁掉，可以避免出现输入的字符“闪现”的效果