Safari< input>iOS上图像打开对话框的位置

nue99wik 于 2023-04-13 发布在 iOS

关注(0)|答案(4)|浏览(178)

我需要从照片库/相机中触发浏览器图像选择，以响应用户单击自定义元素（隐藏默认的<input>）。
使用通常为此建议的标准代码。
HTML：

<input id="image-input" style="display: none" type="file" accept="image/*"/>
<button onclick="browse()">BROWSE</button>

和脚本：

<script>
  function browse() {
    document.getElementById("image-input").click();
  }
</script>

这与预期的一样，但在iOS（iPhone，15.4）上，弹出对话框的位置是不可预测的。
大多数情况下，对话框会在按钮下面弹出，但并不完全在同一个位置，有时它只是在页面底部弹出。我似乎无法确定是什么用户操作导致了不同的行为。

如果我没记错的话，在以前的iOS版本中，这个对话框会在屏幕底部打开一个固定的抽屉？
有什么方法可以控制这个对话框的位置吗？理想情况下，我希望它只是作为一个固定的模式抽屉在底部打开，但任何可以使一致的可控行为也可以工作。

ios

来源：https://stackoverflow.com/questions/72076521/position-of-image-input-open-dialog-on-safari-ios

4条答案

按热度按时间

ubby3x7f1#

所以我在我的iPhone 8+，Safari，iOS 15.2.1上看了一下这个问题
I created this fiddle here to play around with:https://codepen.io/treckstar_/pen/oNELeqY
我无法复制你所说的确切问题。我得到的是相反的。我取消隐藏文件输入，这样我就可以尝试点击它们，看看会发生什么。每隔几次我会点击“应该隐藏”输入，文件打开对话框会在顶部的浏览按钮打开。
由于我们没有确切的代码，我不能肯定，但我认为，无论你有什么隐藏的输入位于页面底部的某个地方，它只是显示在最后一个输入被点击的地方。
我认为主要问题是使用JavaScript/jQuery单击按钮会导致iOS Safari上文件输入对话框的间歇性定位。
所以我建议我的解决方案是，不要使用JavaScript/jQuery来点击文件按钮。
您可以设置一个按钮，文件上传位置在其上方，不透明度设置为0。

#image-input {
  position: absolute !important;
  left: 0px;
  top: 0px;
  clip: rect(0px, 40px, 40px, 0px);
  opacity: 0.0;
  padding: 10px 0px;
}

<a id="image-file-button" data-role="button">Button</a>
<input id="image-input" type="file" data-role="none" name="image-file-upload" />

赞(0）回复(0）举报 2023-04-13

7vux5j2d2#

同样的问题也发生在我的iPhone x上。我认为这是safari浏览器的默认问题（不能说是问题还是功能），但我所经历的是，它根据我们的TAP POSITION显示文件输入对话框。你可以在这里的视频中看到这一点。
点击观看视频

赞(0）回复(0）举报 2023-04-13

neekobn83#

弹出窗口移动的原因可能是页面上的另一个元素正在移动它并改变它移动的位置，在不同的设备上，它将在不同的地方，因为它被移动到看起来不会被砸碎的地方。

赞(0）回复(0）举报 2023-04-13

eqfvzcg84#

将input.click()操作放在setTimeout中。50毫秒就可以了

赞(0）回复(0）举报 2023-04-13

我来回答

Safari< input>iOS上图像打开对话框的位置

4条答案

相关问题

热门标签

最新问答