Question

我有一条指令要从输入中删除空格。

在这个html中它有几个输入。

      <input matInput name="id" placeholder="ID" removeSpaces />

      <input matInput name="name" placeholder="NAME"/>

我的指示：

@Directive({
   selector: '[removeSpaces]'
})
export class RemoveSpacesDirective {

   constructor() { }


   @HostListener('document:keydown.space', ['$event']) onKeydownHandler(event: KeyboardEvent) {
      event.preventDefault();
   }    
}

它有效，但是它会监听两个输入，“id”和“name”这很清楚因为我正在使用“document”，所以，我想把它改成输入，我不成功的选项：

 @HostListener('input', ['$event']) onKeydownHandler(event: KeyboardEvent) {
       //problem here event is not a keyobardEvent, its an inputEvent, so, I don't have keyCode to check if its a space
      event.preventDefault();
   }

我该如何解决？

Answer 1

试试这个

   @HostListener('focus') onKeydownHandler(event: KeyboardEvent) {
     //problem here event is not a keyobardEvent, its an inputEvent, so, I 
      don't 
     have keyCode to check if its a space
      event.preventDefault();

}

Answer 2

我已经解决了，它只是删除＆＃34;文档＆＃34;：

 @HostListener('keydown.space', ['$event']) onKeydownHandler(event: KeyboardEvent) {
  event.preventDefault();
 }

输入和键盘监听器

2 个答案: