我有一个非常简单的input type=time
,它具有根据MDN:的有效时间值
:invalid { border-color: red; }
<input type="time" value="00:00:00.750" onchange="console.log(this.validity)" />
如果我只是运行代码段(Safari(并编辑值(Firefox 93(,无论我将其编辑到什么位置,输入都会被视为无效,原因是"stepMismatch": true
有效性失败(Safari 15、Firefox 93和94、MacOS 12(。
这是怎么回事?step
是如何为这种输入类型工作的,以及如何摆脱无效状态?
根据MDN,input[type=time]
的默认step
属性等于60
,以秒为单位。
这意味着,在没有显式step
属性的情况下,时间只能以一分钟的倍数更改。
step
与min
属性(如果存在(或value
属性(如果不存在(一起工作,因此设置初始value="00:00:00.750"
意味着只有超过给定分钟750ms的值才被认为是有效的,并且根据浏览器及其显示输入的方式,用户甚至可能无法做到这一点
设置step="1"
将允许您根据自己的意愿设置时间的秒部分,step="0.001"
也应该允许您设置毫秒。step="any"
也是一个选项,但目前还没有明确定义。我个人认为这意味着它基本上完全禁用了分辨率检查,但浏览器可能不同意。