如何让用户在HTML5网页表单中输入持续时间而不会让他们烦恼？

Question

我的用户需要输入天,小时和分钟的持续时间.

现在我刚刚将这个实现为三个可以正常工作的字段,但这并不是一个很好的设计.另一种方法是只需1场,让他们键入2 days, 3 hours, 45 minutes或15 m或1d 2h 35m或90m或2 days等等.这似乎将需要一些不平凡的解析,以获得真正的权利,是复杂的国际化.

什么是Web UI组件的"最佳实践"示例,允许用户输入一段时间？

请注意,这不是a DatePicker,而是持续时间输入组件.

Answer 1

在考虑了这里的反馈之后，我决定使用简洁的输入样式和一些智能分析来实现一个表单字段。最终结果请参见http://jsfiddle.net/davesag/qgCrk/6/。当然欢迎改进。

function to_seconds(dd,hh,mm) {
  d = parseInt(dd);
  h = parseInt(hh);
  m = parseInt(mm);
  if (isNaN(d)) d = 0;
  if (isNaN(h)) h = 0;
  if (isNaN(m)) m = 0;

  t = d * 24 * 60 * 60 +
      h * 60 * 60 +
      m * 60;
  return t;
}

// expects 1d 11h 11m, or 1d 11h,
// or 11h 11m, or 11h, or 11m, or 1d
// returns a number of seconds.
function parseDuration(sDuration) {
  if (sDuration == null || sDuration === '') return 0;
  mrx = new RegExp(/([0-9][0-9]?)[ ]?m/);
  hrx = new RegExp(/([0-9][0-9]?)[ ]?h/);
  drx = new RegExp(/([0-9])[ ]?d/);
  days = 0;
  hours = 0;
  minutes = 0;
  if (mrx.test(sDuration)) {
    minutes = mrx.exec(sDuration)[1];
  }
  if (hrx.test(sDuration)) {
    hours = hrx.exec(sDuration)[1];
  }
  if (drx.test(sDuration)) {
    days = drx.exec(sDuration)[1];
  }

  return to_seconds(days, hours, minutes);
}