Fatal编程技术网
  • html/
  • Html 如果我想隐藏我的文本区域，我该怎么做？

Html 如果我想隐藏我的文本区域，我该怎么做？

html css

Html 如果我想隐藏我的文本区域，我该怎么做？,html,css,Html,Css,如果我想隐藏我的文本区域，我该怎么做？使用CSS可见性属性应该可以做到这一点。使用CSS:显示：无（这将使文本区域完全消失，它通常占用的空间将不被保留）您有几个选项，下面是一些示例： 显示：无 可见性：隐藏 下面是一些示例代码供您自己查看 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

如果我想隐藏我的文本区域，我该怎么做？

使用CSS可见性属性应该可以做到这一点。

使用CSS:
显示：无（这将使文本区域完全消失，它通常占用的空间将不被保留）
您有几个选项，下面是一些示例：


  • 显示：无
    • 

  • 可见性：隐藏
    • 
下面是一些示例代码供您自己查看
    

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Text Area Hidden</title>
    <style type="text/css">
        .hideButTakeUpSpace
        {
            visibility: hidden;
        }

        .hideDontTakeUpSpace
        {
            display:none;
        }

    </style>

</head>
<body>
    <h1>Text area hidden examples</h1>
    <h2>Hide but take up space (notice the gap below)</h2>
    <textarea class="hideButTakeUpSpace" rows="2" cols="20"></textarea>

    <h2>Hide Don't take up space</h2>
    <textarea class="hideDontTakeUpSpace" rows="2" cols="20"></textarea>


</body>
</html>

    

    
隐藏的文本区域
.hideButTakeUpSpace
{
可见性：隐藏；
}
.hiddenttakeupspace
{
显示：无；
}
文本区域隐藏示例
隐藏但占用空间（注意下面的间隙）
躲起来不要占空间

    

    看看这个
    每个人都在给你答案，但原因不多。这就是你要做的：如果你使用CSS规则
    visibility:hidden文本区域将不可见，但仍会占用空间。如果使用CSS规则
    display:none文本区域将被隐藏，它不会在屏幕上保留空间，也就是说，没有间隙，它本来应该在哪里。下面是一个可视示例
    
所以你想把这样的事情完全隐藏起来：
    

    文本区域（不隐藏）
    
内的文本。
后面有一些文字
    

    
显示
    的文本区：无
    
内的文本。
后面有一些文字。既不保留高度也不保留边距/填充/布局。没有其他样式可见
    

    
可视性为
    的文本区域：隐藏
    
内的文本。

    后面有一些文字。保留高度和边距/填充/布局。没有其他样式可见。
    隐藏并占用当前网页上的空间
    

    <textarea style="visibility:hidden"></textarea>

    

    

    
在当前网页上消失，没有其他效果
    

    <textarea style="display:none" ></textarea>

    

    

    
textarea.none{
显示：无；
}
textarea.hidden{
可见性：隐藏
}
显示为无。

    
可见是隐藏的

    
这是可见的，你可以看到一个空间采取可见：隐藏

    我有此代码如何将其设置为隐藏您可以添加style=“display:none”。正如@thelost所说，您还可以执行style=“可见性：隐藏”。这将使文本区域仍然占据页面上的空间。你真的应该把它放在样式表中。这意味着将class=“hidden”添加到textarea标记中，并将textarea.hidden{display:none；}添加到css文件中

    <textarea style="display:none" ></textarea>

    

    <!DOCTYPE html>
<html>
<head>
<style>
textarea.none {
    display: none;
}

textarea.hidden {
     visibility: hidden
}

</style>
</head>
<body>

<textarea class="none">The display is none.</textarea>
<br>
<textarea class="hidden">visiblity is hidden</textarea>
<br>
<textarea >This is visible and you can see a space taken visiblity:hidden</textarea>
</body>
</html>