在 Javascript 中隐藏“未选择文件”工具提示答案

【问题标题】：hiding a "No file chosen" tooltip in Javascript在 Javascript 中隐藏“未选择文件”工具提示
【发布时间】：2017-03-27 22:02:19
【问题描述】：

我知道有很多关于它的问题，但他们没有正确回答。在阅读和寻找之后，我尝试了这个：

<input id="ext-element-47" class="x-input-file x-input-el" type="file" accept="" style="display:none">

隐藏文件输入然后

this.element.down(".x-input-file").dom.click();

这适用于 Chrome 的控制台，但在我的 JS 代码中却没有。它没有点击。

有人知道为什么吗？以及我可以为点击做些什么？

注意事项：我需要单击，因为文件元素不可见，因此当它单击时它不会显示，除非我执行 element.click ()。

这是我正在做的一个例子：

document.getElementsByClassName('o-file-field-input')[0].click()

.o-file-field-input {
  display: none;
}

.o-big-btn {
  background-color: red;
  height: 3em;
  width: 3em;
}

<div class="x-container x-unsized o-cont-option" data-componentid="ext-container-5" id="ext-container-5">
  <div class="x-inner x-align-center x-pack-center x-horizontal x-layout-box" id="ext-element-50">
    <div class="x-button x-button-plain open-field-icon o-big-btn x-layout-box-item x-flexed x-stretched" id="ext-OUI_BaseButton-1" data-componentid="ext-OUI_BaseButton-1" tabindex="0" style="-webkit-box-flex: 1;">
      <span class="x-button-icon x-shown smf smf-upload-file" id="ext-element-45"></span>
      <div class="o-button-bg"></div>
      <div class="x-unsized x-field-input x-has-height" id="ext-fileinput-1" data-componentid="ext-fileinput-1" style="height: 38px;">
        <input id="ext-element-47" class="x-input-file x-input-el o-file-field-input" type="file" accept="">
        <div class="x-field-mask x-hidden-display" id="ext-element-48"></div>
        <div class="x-clear-icon" id="ext-element-49">
        </div>
      </div>
    </div>
  </div>
</div>

再见！

【问题讨论】：

隐藏file 输入的默认值与隐藏元素本身非常不同。你想做哪一个？
我隐藏了整个元素，所以，现在我想点击它时打开文件面板。
但是您不能单击隐藏的元素，因为它是隐藏的。您需要在其周围包裹另一个元素或类似的元素。
我认为这是浏览器的属性，无法更改，例如您想更改警报框的颜色。
@EsNoguera visible: hidden != display: none!

标签： javascript html css google-chrome dom

【解决方案1】：

这是我通常做的：将输入包裹在 <label> 元素中，然后将元素设置为按钮，例如：

.pretty-file {
  border: 1px solid #000;
  cursor: pointer;
  display: inline-block;
  padding: 5px 15px;
}

.pretty-file input[type="file"] {
  display: none;
}

<label class="pretty-file">
  Choose File
  <input type="file" />
</label>

【讨论】：

【解决方案2】：

这终于奏效了：

var obElement = document.getElementsByClassName('input-file')[0];
//the title property overrides tooltip's description
obElement.setAttribute('title', ' ');

.flex-style{
 display: flex;
}

.input-file{
 opacity: 0;
 margin-left: -40px;
 width: 40px;
 height: 45px;
}

.icon{
 width: 40px;
 height: 45px;
 background-color: blueviolet; 
}

<div class='flex-style'>
<div class='icon'></div>
<input class='input-file' type='file'>
</div>

【讨论】：