事件“selectstart”在“input”字段上不起作用

问：

我对角度指令有疑问。我在stackblitz Project上准备了一个简单的项目。 基本上，我注意到HTML控件接收事件但从不接收事件。 同样，控件接收事件，但从不接收事件。 您可以通过查看我的调试日志输出或在调试器中设置断点来检查它。inputselectselectstartlabelselectstartselect

这是设计使然还是角度上的错误？

（仅包含事件处理程序）并如下所示：Directivehtml template

指令：

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


@Directive({
  selector: '[appDateInput]',
  })

export class DateInputDirective {
  constructor(private el: ElementRef, private renderer: Renderer2) {
    console.log("S:" + this.el.nativeElement.selectionStart
      + " E:" + this.el.nativeElement.selectionEnd
    );
  }

  @HostListener('selectstart', ['$event'])
  onSelectStart(event: KeyboardEvent): void {
    //event.preventDefault();
    console.log("onSelectStart called");
    console.log("S:" + this.el.nativeElement.selectionStart
      + " E:" + this.el.nativeElement.selectionEnd
    );
  }
  @HostListener('select', ['$event'])
  onSelect(event: KeyboardEvent): void {
    //event.preventDefault();
    console.log("onSelect called");
    console.log("S:" + this.el.nativeElement.selectionStart
      + " E:" + this.el.nativeElement.selectionEnd
    );
  }
  @HostListener('selectionchange', ['$event'])
  onSelectionChange(event: KeyboardEvent): void {
    //event.preventDefault();
    console.log("onSelectionChange called");
    console.log("S:" + this.el.nativeElement.selectionStart
      + " E:" + this.el.nativeElement.selectionEnd
    );
  }
}

HTML 模板：

<label appDateInput>Selection test</label>

<form>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname" appDateInput><br><br>
</form>