Html 如果我想隐藏我的 textarea，我该怎么做？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2362498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
If I want my textarea to be hidden, how do I do it?
提问by nisnis84
If I want my textarea to be hidden, how do I do it?
如果我想隐藏我的 textarea，我该怎么做？
回答by
Everyone is giving you answers, but not much on the reasons. Here you go: if you use the CSS rule visibility:hidden;the text area will be invisible, but it will still take up space. If you use the CSS rule display:none;the textarea will be hidden andit won't reserve space on the screen—no gaps, in other words, where it would have been. Visual example below.
每个人都在给你答案，但没有太多的原因。在这里：如果您使用 CSS 规则visibility:hidden;，文本区域将不可见，但仍会占用空间。如果您使用 CSS 规则，display:none;则 textarea 将被隐藏，并且不会在屏幕上保留空间 - 没有间隙，换句话说，它本来的位置。下面的视觉示例。
So you want something like this to be totallyhidden:
所以你想要完全隐藏这样的东西：
<textarea cols="20" rows="20" style="display:none;">
Example
例子
/* 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>回答by Alex KeySmith
You have a few options, here are some examples:
您有几个选择，以下是一些示例：
- Display:none
- Visibility:hidden
- 显示：无
- 可见性：隐藏
Here is some example code for you to see for yourself
这是一些示例代码供您自己查看
<!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>
See this jsFiddle Example
看这个jsFiddle 例子
回答by Rune
Using css: display: none;(this will make the textarea disappear completely, the space it would normally take up will not be reserved)
使用css：（display: none;这会使textarea完全消失，它通常占用的空间不会被保留）
回答by RivEr
Hidden with occupy the space on current webpage.
隐藏并占用当前网页的空间。
<textarea style="visibility:hidden"></textarea>
Disappear on current webpage with no other effect.
消失在当前网页上，没有其他影响。
<textarea style="display:none" ></textarea>
回答by Venkat
<!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>
回答by thelost
Using the CSS visibility property should do the trick.
使用 CSS 可见性属性应该可以解决问题。
