HTML | DOM 输入时间步长属性

简介

HTML5中为 <input> 元素增加了一个 step 属性，用于指定在用户向输入框中输入时间时输入控件增加或减少的时间。该属性只适用于 <input> 类型为 "time", "date", "month", "week", "datetime-local", "time-local" 的输入控件。

语法

<input type="time" step="HH:MM:SS">
<input type="date" step="YYYY-MM-DD">
<input type="month" step="YYYY-MM">
<input type="week" step="YYYY-W##">
<input type="datetime-local" step="YYYY-MM-DDTHH:MM">
<input type="time-local" step="HH:MM:SS">

• step：表示时间边界，在时间或日期时间输入后自动跳到下一个时间。

日期和时间的格式完全取决于浏览器和操作系统的时间设置。

示例

以下是一个示例代码，使用 step 属性指定的时间边界为 5 秒钟：

<label for="time-input">选择时间：</label>
<input type="time" id="time-input" step="5">

浏览器支持

支持 step 属性的浏览器包括以下款式：

• Internet Explorer: 10.0+
• Chrome: 4.0+
• Safari: 5.1+
• Firefox: 57.0+
• Opera: 15.0+
• Edge: 12.0+

总结

以上就是 step 属性的介绍，该属性用于指定时间输入控件增加或减少的时间，可以根据自己的需求设定不同的时间边界，提高用户的使用体验。不支持该属性的浏览器可以使用 JavaScript 来模拟实现。