有没有办法防止时间输入中的分钟输入？

Question

我目前正在构建一个工具来安排任务在Angular应用程序中自动运行，所以我需要用户输入一个小时来执行任务，安装一个包来管理这个输入似乎有点太多了，所以我想知道是否有一种方法可以限制用户在<input type="time">中输入的内容。

我读到过step属性，但它仍然允许用户手动编辑会议记录。当然，我只会节省用户输入的时间，但从UX的角度来看，让他们选择与实际流程无关的特定分钟是一件坏事。

​

<input type="time"/>

​

Answer 1

在某些浏览器中，如果将步长设置为小时，则不允许您设置分钟。

​

<input type="time" id="time" step="3600"/>

​

另一个选项是设置onchange事件，并手动从输入中清除分钟。

​

document.getElementById("time").addEventListener("change", function(evt) {
  var match = this.value.match(/^(\d{2})/);
  if (match) this.value = match[1] + ":00";
});

<input type="time" id="time" />

​

或者只是选择小时数..。

​

function populateTimes () {
  var sel = document.getElementById("time");
  for (var i=0; i<24;i++) {
    var amPm = i < 12 ? "AM" : "PM";
    var hour = (i % 12 ? (i % 12): 12).toString().padStart(2, '0');
    var opt = new Option(hour + ":00 " + amPm, i + ":00");
    sel.appendChild(opt);
  }
}
populateTimes();

<select id="time"></select>

​