Question

我有应该上传图片的表格。每个表单都放在iframe中

<body style="margin: 0; padding: 0; height: 100%; cursor: pointer;" onclick="document.querySelector('.register-upload-input').click()">
   <form method="POST" action="http://127.0.0.1:8000/de/client/registerupload" accept-charset="UTF-8" enctype="multipart/form-data">
      <input class="register-upload-input" style="display: none;" onchange="document.querySelector(".preloader").style.display="block";document.querySelector("form").submit();" accept=".jpg,.jpeg,.png" name="image" type="file">
   </form>
</body

所以我点击iframe，出现文件上传对话框，我可以选择图片。 body元素有onclick个事件。一切正常，但当我尝试用iphone上传图像没有任何反应时，对话框提示不显示。它适用于Android，但不适用于iPhone。我做过研究，通常会发生这样的问题，因为元素在样式中应该有cursor: pointer。我添加了它，但没有改变

Answer 1

请勿在{{1}}上设置display:none，您可以设置<input>。

修改

我检查了我的笔记，发现stackoverflow上有同样的问题。

同样的问题是here。


有三件事导致了这个问题：



在javascript上，删除return false;事件监听器



在样式表中，调用操作的元素必须具有该属性   cursor：指针;苹果可能会在这些电话中提出这一要求   获得有关用户界面的最佳反馈。



再次在样式表中，我们不能   setting display：none;隐藏输入因为某些浏览器没有   接受对未显示的元素的点击。

Answer 2

将以下CSS添加到 IFrame 内容。

html, body {
    touch-action: auto;
}

onclick事件在iphone上不起作用

2 个答案: