输入和键盘监听器

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

我已经解决了，只是删除 "document":

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

输入和键盘监听器

input and keyboard listener

angular-directive

angular