使用隐藏标签元素触发文件输入提示 - Safari

Posted 2023-03-05

【中文标题】使用隐藏标签元素触发文件输入提示 - Safari

【英文标题】：Trigger the file input prompt with a hidden label element - Safari

【发布时间】：2015-04-27 14:29:31

【问题描述】：

我有代码：

<label name="xs" id="xs" for="fileselect">
  <p class="add_atach">Test</p>
</label>
<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" style="display:none;" />

如果我离开display:none; 点击什么都不会发生。如果我将其更改为visibility:hidden;，代码可以工作，但元素占用的空间仍然存在。我该怎么办？

【参考方案1】：

现代浏览器会触发文件input元素打开，即使元素被display: none隐藏；但正如您所注意到的，这在 Safari 中不起作用。另外在IE8及以下也无法使用。

作为一种解决方法，这里有two alternative 解决方案，应该适用于所有情况。

最简单的选择是将元素的定位设置为fixed，然后使用right: 100%/bottom: 100% 的组合将其定位在屏幕之外。

Example Here

input[type="file"] 
    position: fixed;
    right: 100%;
    bottom: 100%;

您也可以使用 commonly used to visually hide content 的 CSS，但允许它对屏幕阅读器保持可见：

Example Here

input[type="file"] 
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;

这两个选项在不使用display: none 的情况下有效地隐藏了input 元素。