如何使用javascript隐藏上传文件元素

How to hide an upload file element using javascript?

本文关键字：文件 元素 隐藏 何使用 javascript      更新时间：2023-09-26

它非常wierd。我的结构是

<form name="fm"> 
    <input type="file" name="fl">
    <input type="text" name="st"> 
</form>

现在document.fm.st.hidden=true可以按预期隐藏文本框，但document.fm.fl.hidden=true不起作用，它不会隐藏文件上传元素！为什么&如何四处工作？

听起来这可能是脚本在页面完全加载之前运行的情况。如果你想在脚本运行之前绝对确定页面已经加载，你可以这样做：

document.onload = function(){ // if you want it could also be window.onload
    document.fm.st.hidden = true;
    document.fm.fl.hidden = true;
};

你不能只给它一个id并使用

document.getElementById('yourID');

其他时候，也许你可以为它创建一个css类，并使用Jquery

.addClass() and .removeClass()

如果您想保留输入的空间，则应用visibility="hidden"，否则display="none"。

按名称获取元素var inputElements=document.getElementsByName（"fl"）；这将为您提供一个名为"fl"的元素列表。

现在，如果要隐藏所有元素，请运行循环。目前，它只提供一个元素。var inputElement=inputElements[0]；

如果您想长期使用javascript，我建议您使用jQuery。

现在隐藏元素inputElement.style.display="无"；

对于初学者，请确保您的脚本在元素之后。您提供的javascript应该和您提供的一样工作，但如果没有，请尝试以下操作：

<form name="fm"> 
    <input type="file" name="fl">
    <input type="text" name="st"> 
</form>
<script>
    // hides the element (it will still take up space)
    document.getElementsByName("fl").style.visibility="hidden";
    // hides the element (it does not take up any space)
    document.getElementsByName("fl").style.display="none";
</script>
相关文章：