如何让用户在 HTML5 网络表单中输入持续时间而不打扰他们？

Posted 2023-03-06

【中文标题】如何让用户在 HTML5 网络表单中输入持续时间而不打扰他们？

【英文标题】：How can I get a user to input a duration into an HTML5 web form without annoying them?

【发布时间】：2013-01-22 11:31:50

【问题描述】：

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

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

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

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

【问题讨论】：

您的上下文是否适合任何经常选择的持续时间？也许您将文本字段与下拉列表配对，所以我可以输入 90，然后选择“分钟”...您可以输入 1.5，然后选择“天”...等等

这可能是一个解决方案。也许是一种自动完成功能，可以训练用户以特定方式输入。

或者只关注最常选择的下拉选项，并将其设为默认值，以便只有部分用户需要修改它？

您的问题似乎涉及两个主题。从技术上讲，如何完成您想要做的事情，还是基于 UI 和呈现给用户的内容？

【参考方案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);

【讨论】：

一个小提示：如果您希望天数超过 9，请将 * 添加到 day 正则表达式，如下所示：new RegExp(/([0-9]*)[ ]?d/);跨度>

如果您使用“[0-9]+”而不是“[0-9][0-9]？”那么您允许输入超过两位数的天数、小时数和分钟数。像 222h 也可以

【参考方案2】：

需要考虑的事项：

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

您想要效率还是首次直观的行为？有些应用程序不是直接直观的，但经过培训可以比“更简单”的应用程序更有效地使用。

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

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

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

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

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

【讨论】：

我的用户更有可能输入 x 分钟（最多 90 分钟），或 n 小时 x 分钟（最多 48 小时），很少 y天，n 小时，x 分钟（更可能是 48 小时或 2 天。从不超过 9 天。无论如何，我的用户已经在打字了，所以，考虑一下（顺便说一句，你的帖子和 Robot 一样很有帮助）上面 cmets 中的伍兹，所以谢谢，）所以我目前正在试验一个简单的输入字段，它可以根据输入的结果自动更正。

请参阅this jsfiddle，了解我目前所提出的示例。

@DaveSag - 我喜欢您的示例，即使对于初次使用的用户来说也非常直观。它在本质上与 datejs.com 提供的功能相似（参见演示，您可以在其中输入日期偏移量），因此这种类型的 UI 已有先例。

如果您有频繁/普通用户，我认为他们会发现这是一种输入数据的有效方式（无需键盘/鼠标切换），击键次数少，无需鼠标移动，完成 onblur .

感谢蒂姆的反馈。

【参考方案3】：

你考虑过jQuery Datepicker吗？

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

【讨论】：

抱歉，没有神奇的设计子弹可以将日期选择器变成持续时间编辑器。我当然已经看过 DatePickers 等等，但我正在寻找的是一个 UX 解决方案，而不是一个破解插件，因为你认为 oh he wants something with days in it, I know, a DatePicker.

我完全理解你的情况。您应该在答案中包含该详细信息，否则我假设您尚未尝试将其实现为持续时间选择器。

【参考方案4】：

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

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

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