时间戳

首页 > 解决方案 > 将零填充到输入字段但将其延迟一秒

javascript - 将零填充到输入字段但将其延迟一秒

问题描述

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

// function to prepend 0 to a minute if the minute is under 10
Calendar.prototype.displayMinute = function (minute) {
   minute = (minute < 10) ? '0' + minute : minute;
   return minute;
};

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

标签： javascriptangulareventstimeout

解决方案

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

然后，您可以对输入事件使用去抖动功能，以便延迟。

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 和 debounce

推荐阅读