Question

我有一个用于上传图片的表单。输入（类型文件）具有必需属性，因此在选择文件之前选择提交会导致验证错误。当使用带有ios 11的iPhone时（我已经使用chrome，firefox和safari进行了测试），如果您首先选择提交以接收验证错误（在iPhone ios 11上是＆＃34;选择文件＆＃34; ）然后选择＆＃34;选择文件＆＃34;而＆＃34;选择一个文件＆＃34;仍然显示（意味着要重现问题，您不能先在屏幕上的其他位置选择删除＆＃34;选择文件＆＃34;验证错误），弹出窗口允许您选择不显示的文件。从现在开始，即使刷新页面，也可以选择文件＆＃34;不会做任何事情。关闭浏览器（通过双击主页按钮并在浏览器上向上滑动），然后重新打开浏览器将允许输入再次工作（直到您按照上面的说明重现问题）。我发现如果我在下面的代码中删除带有content属性的元标记，则不会出现问题。

这是代码（只是一个基本形式）。

<!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>

有关为何发生这种情况的任何想法？

Answer 1

好像是一个移动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);
  }
};

在输入（类型文件）上使用必需属性会导致输入停止在iPhone ios 11上运行

1 个答案: