javascript - 在 iOS for iPad 上浏览器输入 type="date" 的 Onchange 行为

Question

我有一个 700 行的 HTML/JavaScript 页面，其中包括验证日期。它适用于桌面操作系统、Android 和 iPhone，但在 iPad 上的 iOS Safari 14.4 上失败，因为在input type="date"用户做出选择之前触发了 change 事件。

编辑：在 iPad 上的 iOS 14.4 上的 Chrome 和 Firefox 会发生这种情况，略有不同。猜想：这三个都在使用 OS 日期选择器，根本问题是 iOS 14.4 for iPad。

一个最简单的例子是：

document.getElementById("date1").addEventListener("change",dtChange);
document.getElementById("ckValue").addEventListener("click",getValue);
function dtChange(evt) {
    var val=document.getElementById("date1").value;
    alert('Change event signaled; value='+val);
}
function getValue() {
    var val=document.getElementById("date1").value;
    alert("Value of date ="+val);
}

<form name="test" >
<input type="date" name="date1" id="date1"><br>
<br>
</form>
<button id="ckValue">Check Value</button>

这是一个小提琴：https ://jsfiddle.net/1jnqf5aL/1/

在这个在 iPad 上运行的示例中，当最初加载表单并触摸/点击日期项时，更改事件会立即触发并且输入项的值是当前日期。我的应用程序检测到更改事件，并在用户有机会选择日期之前发出“出发日期必须在未来”错误消息。

对于其他操作系统，在用户在日历表单中选择日期之前不会触发更改事件。

我可以通过在输入元素上提供一个初始属性来使 iPad 中的浏览器运行，value=其中值是 ISO 8601 格式的当前日期。问题在于，当前日期在此应用程序中不是有效日期，因此我不想将其显示给应用程序的用户。如果/当 iPad 的 iOS 更改为与其他操作系统类似的行为时，浏览器嗅探将失败。

我的问题：如何在没有浏览器嗅探的情况下在 iPad 上适应或“围绕”iOS 的这种行为？或者，我是否遗漏了一些明显而基本的东西？

标签： javascriptiosdateipadsafari