Question

我有一个日期选择器的输入字段-用户可以使用键盘输入分钟，当输入的分钟数小于10时，它会自动在前面加上零-因此时间10:1看起来像{ {1}}（有一个小时输入和一个分钟输入字段）-我的问题是它立即显示零，因此很难编辑具有不同值的分钟字段-延迟显示的最佳方法是什么函数使用超时或类似方法，以便在调用时将执行此操作延迟一秒钟左右？

10:01

Answer 1

您应该更新基础输入中的值，而不是更新显示的值。

然后您可以在输入事件上使用去抖功能，以使其延迟。

class Calendar {

  constructor() {
    this.updateMinuteInput = EventEmitter();
    this.updateMinuteInput.debounceTime(1000).do(() => this.padMissingZero)
  }


  // function to prepend 0 to a minute if the minute is under 10
  padMissingZero = function () {
     minute = this.value.split(':')[1];
     if (minute === null || minute === undefined) return;
     minute = parseInt(minute, 10);
     minute = (minute < 10) ? '0' + minute : minute;
     this.value = this.value.split(':')[0] + minute
  };
}

template: "<input type=\"text\" [value]="value" (keyup)='updateMinuteInput($event)'>\n",

有关更完整的示例，请参见Angular and debounce

将零填充到输入字段，但将其延迟一秒钟

1 个答案: