iOS下type="time"的Input聚焦赋值异常：始终设为当前时间

我之前也踩过这个iOS浏览器的坑！你遇到的问题根源在于：iOS上的Safari和Chrome对type="time"输入框有特殊的默认行为——当输入框获得焦点时，浏览器会自动填充当前时间，而且这个操作是在onfocus事件触发之后执行的，直接把你在setTime()里设置的09:00给覆盖了，所以看起来像是赋值无效。

给你两个亲测有效的解决办法： #

1. 用setTimeout延迟执行赋值逻辑

把赋值代码放到一个极短的延迟里，让浏览器的自动填充先完成，再执行我们的设置：

function setTime() {
  setTimeout(() => {
    document.getElementById('timebox').value = "09:00";
  }, 10);
}

10ms的延迟完全足够避开浏览器的自动填充时机，不会让用户感觉到卡顿。

2. 改用mousedown事件替代onfocus

mousedown事件会在浏览器触发自动填充之前执行，直接替换事件绑定就能解决点击聚焦的问题：

<input type="time" id="timebox" onmousedown="setTime()"/>

如果需要兼容键盘Tab键聚焦的场景，可以同时监听focus事件并结合上面的延迟方案，确保所有聚焦方式都能生效。

效果验证 #

修改后不管是点击输入框、用Tab键聚焦，还是点击按钮，在iOS的Safari和Chrome里都能正确把输入框值设置为09:00，按钮的原有逻辑也不受影响。

内容的提问来源于stack exchange，提问作者RandomProgrammer