Если я хочу, чтобы моя текстовая область была скрыта, как я делаю это?
У вас есть несколько вариантов, вот несколько примеров:
Вот пример кода для вы убедитесь сами
<!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
Все дают вам ответы, но не особо о причинах. Вот и все: если вы используете правило CSS visibility: hidden;
, текстовая область будет невидимой, но все равно будет занимать место. Если вы используете правило CSS display: none;
, текстовое поле будет скрыто и , оно не зарезервирует место на экране - иными словами, никаких пробелов там, где оно могло бы быть . Наглядный пример ниже.
Итак, вы хотите, чтобы что-то вроде этого было полностью скрыто:
<textarea cols="20" rows="20" style="display:none;">
/ * стили не должны отображаться ни для одного из методов * / textarea {background: lightblue; граница: сплошной синий 1px; font-weight: жирный; }
Текстовое поле (не скрыто)
Некоторый текст после.
Текстовое поле с display:none;
sizes
Некоторый текст после. Ни высота, ни поля / отступы / макет не сохраняются. Никаких других стилей не видно.
Textarea with visibility:hidden;
sizes
Некоторый текст после. Высота и поля / отступы / макет сохранены. Никаких других стилей не видно.
Используя css: display: none;
(это заставит textarea полностью исчезнуть, место, которое она обычно занимает, не будет зарезервировано)