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, EventEmitter, HostListener, Input, Output } from '@angular/core';

@Directive({
  selector: '[unumber]'
})
export class ValidNumberDirective {
  @Input("unumber") unumberlength: number;
  constructor(public el: ElementRef) {
    el.nativeElement.setAttribute('title', 'Only accept number.');
  }
  @Output() ngModelChange: EventEmitter<any> = new EventEmitter();
  @HostListener('blur', ['$event'])
  onBlur($event: any) {
    this.ngModelChange.emit($event.target.value);
  }
  @HostListener('keypress', ['$event'])
  OnKeyPress(event: any) {
    const keycode = (event.which) ? event.which : event.keyCode;
    if (this.el.nativeElement.value.length >= this.unumberlength && window.getSelection()!.type != 'Range' && keycode != 8 && keycode != 46 && keycode != 37 && keycode != 39) {
      event.returnValue = false;
      return false;
    }
    if (keycode > 31 && (keycode < 48 || keycode > 57) && keycode != 46) {
      return false;
    }
    else if (keycode == 46 && this.el.nativeElement.value.indexOf(".") > -1) {
      return false;
    }
    return true;
  }

  @HostListener('paste', ['$event']) OnPaste(e: any) {
    e.preventDefault();
    return;

  // - 为什么不在keydown里把字符串截取了：因为keydown的时候录入的字符还没有赋值到dom里去
  // - 为什么不在达到最大长度时禁止键盘输入：除非你不想要复制粘贴的功能可以把键盘上2个delete以外的按钮禁掉，可以避免出现输入的字符“闪现”的效果
  // @HostListener('keyup', ['$event']) OnKeyup(e: any) {
  //   if (e.key == ".") return;
  //   if (isNaN(parseInt(e.key))) return;
  //   this.el.nativeElement.value = this.el.nativeElement.value.replace("e", "").replace("E", "").replace("+", "").replace("-", "");
  //   if (this.el.nativeElement.value.length > this.unumberlength) {
  //     this.el.nativeElement.value = this.el.nativeElement.value.slice(0, this.unumberlength);
  //   }
  // }
  // @HostListener('change', ['$event']) OnChange(e: any) {
  //   this.el.nativeElement.value = this.el.nativeElement.value.replace("e", "").replace("E", "").replace("+", "").replace("-", "");
  //   if (this.el.nativeElement.value.length > this.unumberlength) {
  //     this.el.nativeElement.value = this.el.nativeElement.value.slice(0, this.unumberlength);
  //   }
  // }
  // @HostListener('blur', ['$event']) OnBlur(e: any) {
  //   this.el.nativeElement.value = this.el.nativeElement.value.replace("e", "").replace("E", "").replace("+", "").replace("-", "");
  //   if (this.el.nativeElement.value.length > this.unumberlength) {
  //     this.el.nativeElement.value = this.el.nativeElement.value.slice(0, this.unumberlength);
  //   }
  // }
  }
}