为什么这个输入类型=时间在某些浏览器中无效,"stepMismatch" : true?



我有一个非常简单的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属性的情况下,时间只能以一分钟的倍数更改。

stepmin属性(如果存在(或value属性(如果不存在(一起工作,因此设置初始value="00:00:00.750"意味着只有超过给定分钟750ms的值才被认为是有效的,并且根据浏览器及其显示输入的方式,用户甚至可能无法做到这一点

设置step="1"将允许您根据自己的意愿设置时间的秒部分,step="0.001"也应该允许您设置毫秒。step="any"也是一个选项,但目前还没有明确定义。我个人认为这意味着它基本上完全禁用了分辨率检查,但浏览器可能不同意。

相关内容

  • 没有找到相关文章

最新更新