javascript - input[file] 包裹在 Label 内时不可聚焦

Question

我想更改默认文件[输入] 外观。所以我包裹在这样的标签里

<label class="btn upload-dir-btn btn-file">
Browse <input type="file" required id="dir-pic-file" name="dir-pic-file" novalidate>
</label>

我在提交表单时进行一些验证。但是当我得到错误时

An invalid form control with name='dir-pic-file' is not focusable.

这是隐藏默认文件的css

#dir-pic-file{
display: none;

但如果我删除 css，它就可以正常工作。这是我的验证

$('#add-dir-form').on('submit',function(e){

  var file = $('#dir-pic-file').val();
    if (file = '') {
        $('#pic-error').css({'display':'block'});
    }

    e.preventDefault();
    });

Answer 1

Firefox 允许您在 display:none 中操作文件输入，而 Chrome 却不允许。它需要是 visibility:hidden 或 opacity:0 然后移出页面，这样它就不会妨碍。请参阅使用 visibility:hidden 和 position:absolute; 的代码段，通过单击红色箭头在两个浏览器中对其进行测试(这可能需要几次，因为我将箭头放在附近，就像在提示...)好的，现在更新很明显。

$('#add-dir-form').on('submit', function(e) {

  var file = $('#dir-pic-file').val();
  if (file = '') {
    $('#pic-error').css({
      'display': 'block'
    });
  }

  e.preventDefault();
});

body {
  position: relative
}

#dir-pic-file {
  visibility: hidden;
  /* or opacity:0;*/
  position: absolute;
  top: -500px;
}

.btn-file {
  border: 3px inset black;
  position: absolute top:50px;
  left: 50px;
  cursor: pointer;
  border-radius: 16px;
  padding: 0 6px;
}

.btn-file::before {
  content: '\1f882';
  font-size: 20px;
  color: red;
  vertical-align: baseline;
  line-height: .6
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="btn upload-dir-btn btn-file">
Browse <input type="file" required id="dir-pic-file" name="dir-pic-file" novalidate>
</label>