javascript - 隐藏 html 输入元素，直到 javascript 加载

Question

我有一个表单输入（type='file'），我正在使用这个 JQuery plugin进行样式设置。基本上，它在输入元素上覆盖了一个新的跨度，作为各种掩码，并将其全部放在一个 div 中。问题是，在加载 javascript 之前的第二个，它显示标准的 html 输入框和按钮（难看）。我的问题是是否有任何

1）隐藏输入元素（同时保持它的可点击功能）

或者

2）隐藏输入元素，直到javascript启动以掩盖它。

或者

3）我什至没有想到的东西。

提前致谢！

Answer 1

这是一个 100% CSS 的解决方案，不需要 JS 在运行时检查尺寸。诀窍是给输入一个巨大的字体大小，例如460px，这会将任何可见部分推出包装元素：

前任：

<div style="position:relative; width:100px; height:20px; overflow:hidden;">
     Upload button <!-- this text will be shown -->
     <input type="file" style="position:absolute; right:0; top:0; font-size:460px;" />
</div>

Answer 2

通常最好的方法是等到 DOM 和 javascript 完全加载，因此您将输入元素设置为隐藏，然后$(document).ready(function() {...})在加载 javascript 时用于设置输入样式

Answer 3

您可以使用 CSS + Javascript 来做到这一点。

HTML 示例：

<input type="file" name="file" id="file" />

CSS隐藏文件：

input#file
{
    display: none;
}

加载 javascript 后，运行自定义输入的方法并运行 show 命令以使自定义后的输入可见：

$('input#file').customFileInput().show();

通过这种方式，在您的 javascript 完成所有进程之前，您的输入文件不会出现。

Answer 4

您可以结合 CSS 和 jQuery 来隐藏元素，直到它们完全呈现。在您的 CSS 文件中，添加：

.element{
    opacity: 0;
    transition: opacity 0.5s ease;
}

在您的 jQuery 脚本中，在所有渲染内容之后：

$('.element').css('opacity', '1');

'transition' 属性不是必需的，但在某些情况下，当元素显示时具有淡化效果会很好。当许多 jQuery 脚本在站点上运行并且“一切都在闪烁”时，将其添加到 body 元素并且您的网站再次顺利加载。