为啥此输入类型=时间在某些带有“stepMismatch”的浏览器中无效：true？

Posted 2023-03-05

【中文标题】为啥此输入类型=时间在某些带有“stepMismatch”的浏览器中无效：true？

【英文标题】：Why is this input type=time invalid in some browsers with a "stepMismatch": true?为什么此输入类型=时间在某些带有“stepMismatch”的浏览器中无效：true？

【发布时间】：2021-12-18 20:06:51

【问题描述】：

我有一个非常简单的input type=time，根据MDN有一个有效的时间值：

:invalid  border-color: red; 

<input type="time" value="00:00:00.750" onchange="console.log(this.validity)" />

如果我只是运行 sn-p (Safari) 并编辑值 (Firefox 93)，无论我将其编辑成什么，之后输入都会被视为 无效，带有"stepMismatch": true 有效性失败原因（Safari 15、Firefox 93 和 94、MacOS 12）。

这里发生了什么？ step 是如何处理这种输入类型的，以及如何摆脱无效状态？

【问题讨论】：

"valid": true 在这里工作正常

对我也很好。我编辑了这个值，一切都很好。检查您的浏览器版本。

在 chrome 中很好，我在 mac 上的 safari 中得到一个 "stepMismatch": true,，将 step="any" 添加到输入修复它

根据 MDN (1) (2) 默认步长为 1 分钟，因此即使是具有非零秒部分的值也会被视为无效。 step="1" 会给你精确到毫秒。

经过进一步测试，step 实际上基于min（如果给定），否则value。因此，将值更改为 00:01:00.750 是完全有效的，因为它与默认值相差 1 步长。但是00:00:01.750 不会，00:00:00.250 也不会，因为默认步骤是一分钟。

【参考方案1】：

根据MDN，input[type=time] 的默认step 属性等于60，以秒为单位。

这意味着在没有明确的step 属性的情况下，时间只能以一分钟的倍数进行更改。

step 与 min 属性（如果存在）一起使用，否则与 value 属性一起使用，因此设置初始 value="00:00:00.750" 意味着只有超过给定分钟 750 毫秒的值才被认为是有效的，具体取决于浏览器以及它如何显示输入，这对用户来说甚至是不可能的。

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

【讨论】：

step="0.001" 有点工作，但即使值不要求，它也会导致输入显示秒和毫秒。整个 UI 元素似乎相当“不要使用” 不稳定/未完成。必须动态设置 step 以使其与分配的值相匹配，这似乎不是开发人员应该做的事情。我也不明白使用step 的默认值有多大意义。

另外，即使您将时间设置为00:00:00.000 Firefox 仍然会使其无效。考虑到step，这怎么可能是无效的？