Javascript 如何计算网页中文本框的总时间？

我有一个网页。我有两个文本框

我想在点击页面末尾的submit按钮时计算在每个框上花费的总时间

clickInside() {
    this.text = 'clicked inside';
      this.wasInside = true;
      this.activeTime.activeStartDate();
  }

@HostListener('document:click')
clickout() {
  if (!this.wasInside) {
     this.text = 'clicked outside';
   }
   this.wasInside = false;
     this.activeTime.activeEndDate();
   }

---

我创建了一个小POC来管理您的请求。 您可以编写一个非常简单的指令，在您想要跟踪所花费时间的每个输入中实现

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

@Directive({
  selector: '[calcTime]'
})
export class CalcTimeDirective {
  private timeSpentMs: number = 0;
  private lastDate: Date;
  constructor() { }

  @HostListener('focus') onFocus(){
    this.lastDate = new Date();
  }

  @HostListener('blur') onBlur(){
    this.timeSpentMs += (new Date() as any) - (this.lastDate as any);
  }

  public reset(){
    this.timeSpentMs = 0;
  }

  public getTime(){
    return this.timeSpentMs;
  }

  public getTimeSeconds(){
    return this.timeSpentMs / 1000;
  }
}

您可以通过一个简单的示例找到代码。

---

希望它能帮助您。

您可以捕获文本框的

焦点

和

模糊

事件非常感谢您的快速响应。这个代码片段对我来说很好：）