HTML5：输入类型持续时间

Question

有没有办法使用输入类型 duration。我试图以某种方式进行输入，用户可以添加类似这样的持续时间，06:30:27:15 ( hh:mm:ss:ms )并且应该只允许(0-23:0-59:0-59:0-59).

任何帮助表示赞赏！

注意！：我想在 Angular2+ 中实现它。

Answer 1

遗憾的是，HTML 输入和 JavaScript 本身都不支持持续时间数据类型。<input type="time">代表一天中的某个时间，并且可能会根据您的区域设置显示 AM/PM 选择器。

最好的选择是使用文本输入并使用 JavaScript 事件自动插入:和忽略无效输入。使用模式属性也可能有所帮助。在从 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>

我确信有许多开源库为此提供了现成的小部件。

Answer 2

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

试试这个...我希望这有帮助！这是我为我的一个项目所做的事情......