javascript - 即使单击标签区域， Bootstrap 也会打开默认表单输入。我该如何防止这种情况？

Question

我想在其旁边附加一个“浏览”按钮，并且只允许该按钮打开文件浏览器，但是现在如果单击 div 上的任意位置，文件浏览器就会打开。有建议吗？

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Answer 1

Bootstrap的文件输入只是一个<input type="file">在样式看起来像输入字段的标签顶部；因此，当您单击“输入”时，您正在单击 label ，其中引用了 input及其for属性。

我认为您必须稍微调整输入本身的样式，将其放置在button“后面”让它按照您想要的方式工作，并删除标签对输入的引用，这样它就不会打开它。

.custom-file-input {
  position: absolute !important;
  z-index: 2;
  width: 80px !important;
  height: calc(1.5em + .75rem + 2px);
  margin: 0;
  opacity: 0;
  right: 0;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="">Choose file</label>
</div>