HTML5: 输入类型为 duration

Question

有没有办法使用input type duration。我正在尝试以某种方式进行输入，让用户添加时间段，例如这样06:30:27:15（ hh:mm:ss:ms），应该只允许（0-23:0-59:0-59:0-59）。

非常感谢您的任何帮助！

注意：我想在Angular2+中实现这个功能。

- The Rock

---

可能是重复的问题：需要一个持续时间的输入类型。 - EternalHour

使用 imaskjs - Alon Adler

我已经在npm上发布了一个js控件来完成这个任务chronlyhms，请告诉我您的想法，并随时贡献。 - Stephan Luis

一个演示在CodePen上https://codepen.io/stephanluis/pen/oNqMBQa。 - Stephan Luis

更好的使用CodeSandbox https://6s0mfy.csb.app/和可编辑。 - Stephan Luis

在NPM上使用<INPUT-DURATION>。 - Stephan Luis

Answer 1

很遗憾，无论是HTML输入还是JavaScript本身都不支持时长数据类型。<input type="time">是用于显示一天中的时间，并根据你的语言环境可能显示上午/下午选择器。

最好使用文本输入，并使用JavaScript事件自动插入:并忽略无效输入。使用pattern属性也可能有所帮助。在从JavaScript方面使用它之前，请确保将值转换为数字。以下是一些示例代码以供参考。

{
  let durationIn = document.getElementById("duration-input");
  let resultP = document.getElementById("output");
  
  durationIn.addEventListener("change", function (e) {
    resultP.textContent = "";
    durationIn.checkValidity();
  });
  
  durationIn.addEventListener("invalid", function (e) {
    resultP.textContent = "Invalid input";
  });
}

input:invalid:not(:focus) { background: red; }

<input id="duration-input" type="text" required pattern="[0-9]{2}:[0-9]{2}:[0-9]{2}:[0-9]{2}" value="00:00:00:00" title="Write a duration in the format hh:mm:ss:ms">

<p id="output"></p>

我相信有许多开源库可以提供现成的小部件来实现这一功能。

- Domino

---

显然，如果您只需要一个输入，那么这是可行的。使用四个数字输入也完全可行。 - Domino

谢谢你的回答。我想在Angular 9中实现这个，我该如何做到？ - The Rock

这并不是一件简单的事情，而且我对Angular没有经验，抱歉。 - Domino

Answer 2

也许可以尝试这样做：

<input type="time" step="0.001">

- ChokMania

Answer 3

<label for="appt">Choose a time for your meeting:</label>

<input type="time" id="appt" name="appt"
       min="09:00" max="18:00" required>

<small>Office hours are 9am to 6pm</small>

试试这个...希望能有所帮助！ 这是我为我的一个项目做的东西...

- Nikola Milojic

---

时间输入用于表示一天中的具体时间，而非时间段。如果用户所在地使用12小时制，则浏览器可能会显示AM/PM选择器，并且最大值为23:59:59。 - Domino