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

【问题标题】：If I want my textarea to be hidden, how do I do it?如果我想隐藏我的文本区域，我该怎么做？
【发布时间】：2011-01-22 16:19:08
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

每个人都在给你答案，但原因并不多。给你：如果你使用 CSS 规则visibility:hidden; 文本区域将是不可见的，但它仍然会占用空间。如果您使用 CSS 规则 display:none;，textarea 将被隐藏并且它不会在屏幕上保留空间——没有间隙，换句话说，它本来应该在的地方。下面的可视化示例。

所以你希望这样的东西完全隐藏：

<textarea cols="20" rows="20" style="display:none;">

示例

/* no styling should show up for either method */
textarea {
  background: lightblue;
  border: 1px solid blue;
  font-weight: bold;
}

<p><strong>Textarea (not hidden)</strong></p>
<textarea>Text within.</textarea>
<p>Some text after.</p>

<hr />

<p><strong>Textarea with <code>display:none;</code></strong></p>
<textarea style="display:none;">Text within.</textarea>
<p>Some text after. Neither height nor margin/padding/layout kept. No other styles visible.</p>

<hr />

<p><strong>Textarea with <code>visibility:hidden;</code></strong></p>
<textarea style="visibility:hidden;">Text within.</textarea>
<p>Some text after. Height and margin/padding/layout kept. No other styles visible.</p>

【讨论】：

【解决方案2】：

你有几个选择，这里有一些例子：

显示：无
可见性：隐藏

这里有一些示例代码供您自己查看

<!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>

看到这个jsFiddle Example

【讨论】：

【解决方案3】：

使用css：display: none;（这会使textarea完全消失，正常占用的空间不会被保留）

【讨论】：

我有这个代码如何将它设置为隐藏
您可以添加 style="display: none"。正如@thelost 所说，你也可以做 style="visibility: hidden"。这将使 textarea 仍然占用页面上的空间。你真的应该把它放在一个样式表中。这意味着将 class="hidden" 添加到您的 textarea-tag 并添加 textarea.hidden { display: none; } 到你的 css 文件

【解决方案4】：

隐藏并占用当前网页的空间。

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

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

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

【讨论】：

我怎样才能选择该文本区域中的文本。就像我想选择该文本区域中的文本一样，selcet() 方法不起作用。

【解决方案5】：

<!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>

【讨论】：

【解决方案6】：

使用 CSS 可见性属性应该可以解决问题。

【讨论】：