步骤属性不适用于 HTML 输入类型答案

【问题标题】：Step Attribute doesn't work for HTML input type步骤属性不适用于 HTML 输入类型
【发布时间】：2021-02-24 15:01:49
【问题描述】：

我想要一个时间输入字段，用户只能选择完整的小时数。在我的示例中，它将是 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">

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

【问题讨论】：

那是哪个浏览器？ MDN notes 对于step 属性：“此属性在浏览器之间有一些奇怪的影响，因此并不完全可靠。”。所以这可能就是原因。
不幸的是，这是 Edge 的浏览器限制。 See the documentation for time inputs。 "The steps value seems to have no effect in Edge." 你需要找到一个单独的解决方案来执行你的步值。
另见HTML input time, step attribute to set timestep by (say) x minutes?

标签： javascript html forms validation

【解决方案1】：

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

在 Chrome 和 Opera 中，这是唯一显示向上/向下迭代箭头的浏览器，单击箭头会将秒值更改为 2 秒，但不会影响小时或分钟。仅当您以秒为单位指定分钟（或小时）数时，分钟（或小时）才能用于步进，例如 120 表示 2 分钟，或 7200 表示 2 小时）。

在 Firefox 中，没有箭头，因此不使用步长值。但是，如果它确实会在分钟部分附近添加秒输入区域。

steps 值似乎对 Edge 没有影响。

（来源：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>

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

【讨论】：

【解决方案2】：

由于您只对从用户那里获得一个小时的时间感兴趣，那么使用单选输入元素列表做一些非常简单的事情怎么样？

这样您就可以随心所欲地设置样式，而不必担心不同的浏览器会以不同的方式显示类型时间输入元素这一事实 - 您可以跨浏览器创建一致的用户界面。

<br><input type="radio" name="time" value=0> 0
<br><input type="radio" name="time" value=1> 1
<br><input type="radio" name="time" value=2> 2

...

好吧，当然还有额外的 CSS 和 JS 让它看起来和做你想做的事。而且您只需要显示可以预约的时间（例如，可能不是 00.00 小时？）

【讨论】：