Question

我尝试使用带有代码（简化）的不可见元素example获取更好看的文件输入表单元素和引导程序，如：

<div class="container">
  <form enctype="multipart/form-data" action="">
    <input class="hide" id="filesel" type="file" />
    <div class="input-append">
      <input id="filename" class="input-large" type="text" />
      <a class="btn" onclick="testFun();">Browse</a>
    </div>
  </form>
</div>

<script type="text/javascript">
  $('input[id=filesel]').change(function() {
  $('#filename').val($(this).val());
  });

  function testFun(){
  inp = $("#filesel").click();
  }
</script>

但它没有按预期工作。如果我将hide类删除到文件输入标记，它就可以工作。我该如何解决？

更新1：使用更多导航器进行测试：

Ubuntu Chromium 18.0 - ＆gt;失败
Ubuntu Firefox 16.0 - ＆gt;作品

我的Chromium hide或style="display: none"也会影响文件浏览窗口。

Answer 1

如果您删除hide课程并添加style="display: none"（根据示例）会怎样？

Answer 2

设置display:none;不适用于文件输入。虽然您可以设置visibility:hidden;或opacity:0; 还有一个关于样式文件输入here

的精彩教程

不可见文件输入元素不适用于javascript

2 个答案: