Firefox中重置<input type="time">值的跨浏览器兼容问题

这真是个有意思的跨浏览器兼容性问题！我来帮你拆解一下背后的原因，以及判断这是否属于jQuery的Bug：

现象背后的核心原因 #

这其实不是jQuery的Bug，而是不同浏览器对「禁用状态下表单元素的值修改」这一行为的原生DOM实现差异：

• Firefox的处理逻辑：当<input type="time">被设置为disabled后，浏览器会锁定该元素的value属性——任何脚本层面的修改（包括通过jQuery的.val()）都会被忽略，因为Firefox认为禁用状态的元素不应再接受任何值变更。所以如果你先禁用再清空值，清空操作会直接失效。
• Chrome/Safari的处理逻辑：这两个浏览器的DOM实现中，禁用状态仅限制用户的交互操作（比如无法点击输入），但不会阻止脚本对value属性的修改，所以不管先禁用还是先清空，最终都能达到预期效果。

jQuery .val()的底层逻辑 #

jQuery的.val()方法本质上是对原生DOM元素value属性的封装调用，对于大多数输入类元素，它最终都会落到element.value = newValue这步原生操作上。因此它的行为完全受浏览器原生规则约束，并没有额外去抹平这种跨浏览器的差异。

通用解决方案 #

要兼容所有浏览器，只需要统一调整操作顺序即可：先清空值，再设置禁用状态，代码示例如下：

// 正确的兼容顺序：先清空值，再禁用元素
$('#your-time-input').val('').prop('disabled', true);

这种差异属于浏览器厂商对HTML规范的细节实现分歧——HTML规范并没有严格规定禁用元素后脚本是否能修改其值，所以各浏览器有不同的处理逻辑，jQuery不需要为这种底层差异背锅~

内容的提问来源于stack exchange，提问作者steve-kasica