javascript - 步骤属性不适用于 HTML 输入类型

Question

我想要一个时间输入字段，用户只能选择完整的小时数。在我的示例中，它将是 00:00、01:00、02:00 等等。这就是为什么我将 step 属性设置为 3600。因为 3600 秒等于一小时。这是我的代码:

<label for="appt-time">Choose an appointment time: </label>
<input id="appt-time" type="time" name="appt-time" value="00:00" step="3600">

这在我使用箭头键选择时间时有效。但是，当我单击输入字段内的小时图标时，我可以选择分钟，如下图所示。我该怎么做才能让用户只能选择小时？

Answer 1

正如其他人所说，您应该注意 step 的限制。在浏览器交叉兼容性方面。引用 MDN 文档...

In Chrome and Opera, which are the only browsers to show up/down iteration arrows, clicking the arrows changes the seconds value by two seconds, but doesn't affect the hours or minutes. Minutes (or hours) can only be used for stepping when you specify a number of minutes (or hours) in seconds, such as 120 for 2 minutes, or 7200 for 2 hours).

In Firefox, there are no arrows, so the step value isn't used. However, providing it does add the seconds input area adjacent to the minutes section.

The steps value seems to have no effect in Edge.

(Source: MDN Documentation: Using time inputs.)

既然你只关心时间，为什么不使用 list 属性？您需要创建一个 datalist 元素，但它相当简单，一天 24 小时，这只有 24 个子元素。另外，您可以自定义开始/结束时间，并根据需要订购。

  <label for="appt-time">Choose an appointment time: </label>
  <input id="appt-time" list="times" type="time" name="appt-time" value="00:00" step="3600">

<datalist id="times">
    <option value="01:00:00">
    <option value="02:00:00">
    <option value="03:00:00">
    <option value="04:00:00">
    <option value="05:00:00">
    <option value="06:00:00">
    <option value="07:00:00">
    <option value="08:00:00">
    <option value="09:00:00">
    <option value="10:00:00">
    <option value="11:00:00">
    <option value="12:00:00">
    <option value="13:00:00">
    <option value="14:00:00">
    <option value="15:00:00">
    <option value="16:00:00">
    <option value="17:00:00">
    <option value="18:00:00">
    <option value="19:00:00">
    <option value="20:00:00">
    <option value="21:00:00">
    <option value="22:00:00">
    <option value="23:00:00">
    <option value="00:00:00">
</datalist>

警告 :这似乎不适用于 Firefox，而且似乎 FF 在这里几乎没有可定制性。但它在 Chrome 中效果更好。您可能想要寻找不同的输入类型。