15

我的用户需要输入以天、小时和分钟为单位的持续时间。

现在我刚刚将它实现为三个字段，这很好并且可以工作，但这并不是一个很好的设计。另一种方法是只有 1 个字段并让他们输入2 days, 3 hours, 45 minutesor 15 m、 or 1d 2h 35m、90mor2 days等​​。这似乎需要一些非平凡的解析才能真正正确，并且国际化很复杂。

允许用户简单地输入时间长度的 Web UI 组件有哪些“最佳实践”示例？

请注意，这不是一个DatePicker，而是一个持续时间输入组件。

4

4 回答 4

6

在考虑了这里的反馈之后，我决定实现一个具有简洁输入样式和一些智能解析的表单字段。有关最终结果，请参见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);
}
于 2013-02-10T06:35:49.450 回答
3

需要考虑的事项：

  • 您期望的可能输入范围有多广？例如，是否有可能一个用户输入“10 天”而另一个用户输入“2 分钟”？

  • 你想要效率还是第一次直观的行为？一些应用程序不是直接直观的，但经过培训可以比“更容易”的应用程序更有效地使用。

  • 您的用户更喜欢键盘还是鼠标，他们的熟练程度如何？数据输入专业人士将有与“双指打字员”不同的需求/需求。

当然，没有一个正确的解决方案。几个选项：

  • 请记住许多浏览器中提供的新 (HTML 5) 输入 type="range" 和 input type="number"。Range 经常显示为一个滑块（尽管它的名字，它不一定用于输入一个范围）；number 显示为带有可指定增量的数字向上/向下。这可以简化数据输入。

  • 如果您期望输入范围广泛，则 3 个下拉列表（一个代表天、小时、分钟）可能是最简单的选择。这还具有完整的浏览器支持，不依赖任何 JavaScript，在主要移动设备上可预测等。

  • 如果您有常见的持续时间（例如 90 分钟、2 小时、4 小时），您可能会显示一个带有指定持续时间的下拉列表和一个“高级”按钮，该按钮允许对特殊情况进行更精细的规范。

于 2013-02-07T04:18:33.450 回答
0

想想人们已经知道的日期和/或时间选择。行为模式已经为您设置好了。你只需要遵循它。想想在移动设备上正在做什么。从那里您可以利用该模式。

看看： http: //mobiscroll.com/
它有很多功能，并且经过一些小的调整，看起来你可以让它做你需要的事情。

从 UX 的角度来看，使用类似的东西也会让你的应用对用户来说更熟悉，因为这是他们已经理解的常见模式。

于 2013-02-07T13:52:15.920 回答
0

你考虑过jQuery Datepicker吗？

如果您不想直接选择日期，可以在上下文中调整它以获得时间长度。

于 2013-02-07T03:43:53.147 回答