angular - 如何防止输入中的退格符号？

Question

我在 Angular 2 中完成了这个指令，以防止输入字段中的退格符号小于 3：

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

@Directive({
  selector: '[limitTo]'
})
export class RestrictInputDirective {

  @Input() limitTo: number;

  constructor(private el: ElementRef) {
  }

  @HostListener('keydown', ['$event'])
  onKeyDown(evt: KeyboardEvent) {
    let a = (evt.target as HTMLInputElement).value.length;
    if (a <= this.limitTo) {
      evt.preventDefault();
    }
  }
}

但这对我不起作用。

使用：

<input type="text" limitTo="5">

标签： angular

Answer 1

您可以使用 keyDown.backspace 伪事件来防止退格

@Directive({
  selector: '[appLimitTo]'
})
export class LimitToDirective {
  @Input('appLimitTo') limitTo: number=5;
  constructor(private el: ElementRef) { }
  @HostListener('keydown.backspace', ['$event'])
  onKeyDown(evt: KeyboardEvent) {
   console.log(evt.target.value);
    let a = (evt.target as HTMLInputElement).value.length; 
     if (a <= this.limitTo) {
      evt.preventDefault();
    }

  }
}

示例：https ://stackblitz.com/edit/back-space