我有一个用于上载图像的表格。输入（类型文件）具有必填属性，因此在选择文件之前选择提交会导致验证错误。当将iPhone与ios 11一起使用时（我已经对chrome，firefox和safari进行了测试），如果您首先选择“提交”以接收验证错误（在iPhone ios 11上为“选择文件”），然后选择“仍然显示“选择文件”时（选择“文件”）（这意味着要重现该问题，您不能先选择屏幕上的其他位置来消除“选择文件”验证错误），弹出式窗口允许您选择文件不出现。从现在开始，即使刷新页面，“选择文件”也不会做任何事情。关闭浏览器（通过双击主屏幕按钮并在浏览器上向上滑动），然后重新打开浏览器将使输入再次起作用（直到您按照上述说明重现问题）。我发现，如果在下面的代码中删除带有content属性的meta标签，则不会发生此问题。
这里是代码（仅是基本形式）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title></title>
</head>
<body>
<form enctype="multipart/form-data">
<input required type="file" />
<input type="submit" value="Add File" />
</form>
</body>
</html>
对此有何想法？
似乎是移动Safari的错误。半秒钟后，通过模糊活动元素的焦点，我最大限度地减小了在显示验证消息时有人单击输入的可能性。
var form = document.querySelector('form');
var button = document.querySelector('input[type="submit"]');
button.onclick = function (e) {
if (!form.checkValidity()) {
setTimeout(function () {
document.activeElement.blur();
}, 500);
}
};