使用输入字段作为标签在 Chrome 中不起作用答案

【问题标题】：Using input field as label not working in Chrome使用输入字段作为标签在 Chrome 中不起作用
【发布时间】：2014-10-23 09:05:34
【问题描述】：

这在 IE 中可以正常工作，但在 chrome 中不行？

IE 将通过按“测试”或输入字段打开文件浏览器

但是chrome只能通过按'test'打开文件浏览器？

http://jsfiddle.net/ut4jedqb/1/

 <input id="fileupload" style="display: none;" type="file" name="fileupload">
   <label for="fileupload">
      test
      <input disabled="disabled" id="fil_field" style="cursor: pointer;" placeholder="Choose..">
   </label>

【问题讨论】：

标签： html google-chrome input label

【解决方案1】：

你可以做这样的事情，因为无论如何输入都被禁用了，需要做一些工作才能使它看起来准确。

<input id="fileupload" style="display: none;" type="file" name="fileupload"/>
<label for="fileupload">      test
<div style="width:150px;height:21px;background-color:#f3f3f3;border:1px solid  black;cursor: pointer;">Choose....</div>

【讨论】：

是的，如果 chrome 不接受另一个，这可能是解决方案，谢谢
是的，它可以在我的 CHROME 上运行，而且样式多一点看起来会一样。你需要禁用输入吗？如果你这样做，你也可以隐藏它
不，你说得对。我不需要禁用的输入，它只是为了显示我选择的子字符串。我要去 div 的想法，谢谢
不客气。为滴答声喝彩

【解决方案2】：

小提琴

http://jsfiddle.net/ut4jedqb/9/

<input id="fileupload" style="display: none;" type="file" name="fileupload"/>

<label for="fileupload">Choose
   <div class="choose">Select file</div>
</label>

CSS

.choose{
cursor: pointer; 
width:200px;
background:#fff;
border:1px solid red;
margin-left:10px;
padding:4px;
}

input,.choose{   
display:inline-block;
}

【讨论】：

【解决方案3】：

您的第一个输入标签未关闭，这导致文件浏览器在单击标签时打开。

严格来说，输入不应进入标签内部。

我认为最好的选择是在标签周围放置一个元素并输入，然后在用户单击此元素时触发一个事件，使用它您可以在 jquery 中使用单击方法。我会使用类似以下的内容：

<input id="fileupload" style="display: none;" type="file" name="fileupload"/>
<div id="fileuploadcontainer">
   <label for="fileupload">test</label>
   <input disabled="disabled" id="fil_field" style="cursor: pointer;" placeholder="Choose..">
</div>  

<script type="text/javascript">
$(document).ready(function(){    
  $('#fileuploadcontainer').click(function(){
    $('#fileupload').click(); 
  }); 
});
</script>

【讨论】：

感谢您的回复，但它不起作用。输入字段仍然不能作为 chrome 中的标签：jsfiddle.net/ut4jedqb/5
抱歉，这是 jquery，我会编辑。它应该是 .click(function(){} 而不是 onclick