如果我想隐藏我的textarea,我该怎么办?

nis*_*s84 14 html css

如果我想隐藏我的textarea,我该怎么办?

小智 35

每个人都在给你答案,但原因并不多.在这里你去:如果你使用CSS规则visibility:hidden;,文本区域将是不可见的,但它仍然会占用空间.如果你使用CSS规则display:none;,textarea将被隐藏,它不会在屏幕上保留空间 - 没有间隙,换句话说,它本来就是这样.下面的视觉示例.

所以你想要完全隐藏这样的东西:

<textarea cols="20" rows="20" style="display:none;">
Run Code Online (Sandbox Code Playgroud)

/* no styling should show up for either method */
textarea {
  background: lightblue;
  border: 1px solid blue;
  font-weight: bold;
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)


Ale*_*ith 6

你有几个选择,这里有一些例子:

  1. 显示:无
  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>
Run Code Online (Sandbox Code Playgroud)

看到这个jsFiddle示例


the*_*ost 1

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