Question

如果我想隐藏我的textarea，我该怎么做？

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

Answer 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

Answer 3

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

Answer 4

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

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

在当前网页上消失，没有其他影响。

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

Answer 5

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

Answer 6

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

如果我想隐藏我的textarea，我该怎么办？

6 个答案:

实施例