Если я хочу, чтобы моя текстовая область была скрыта, как я делаю это?

Если я хочу, чтобы моя текстовая область была скрыта, как я делаю это?

14
задан nisnis84 10 February 2019 в 23:50
поделиться

4 ответа

Использование свойства видимости CSS должно помочь.

1
ответ дан 1 December 2019 в 06:18
поделиться

У вас есть несколько вариантов, вот несколько примеров:

  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>

См. этот Пример jsFiddle

6
ответ дан 1 December 2019 в 06:18
поделиться

Все дают вам ответы, но не особо о причинах. Вот и все: если вы используете правило CSS visibility: hidden; , текстовая область будет невидимой, но все равно будет занимать место. Если вы используете правило CSS display: none; , текстовое поле будет скрыто и , оно не зарезервирует место на экране - иными словами, никаких пробелов там, где оно могло бы быть . Наглядный пример ниже.

Итак, вы хотите, чтобы что-то вроде этого было полностью скрыто:

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

Пример

 / * стили не должны отображаться ни для одного из методов * / textarea {background: lightblue; граница: сплошной синий 1px; font-weight: жирный; } 
 

Текстовое поле (не скрыто)

Некоторый текст после.


Текстовое поле с display:none;

Некоторый текст после. Ни высота, ни поля / отступы / макет не сохраняются. Никаких других стилей не видно.


Textarea with visibility:hidden;

Некоторый текст после. Высота и поля / отступы / макет сохранены. Никаких других стилей не видно.

35
ответ дан 1 December 2019 в 06:18
поделиться

Используя css: display: none; (это заставит textarea полностью исчезнуть, место, которое она обычно занимает, не будет зарезервировано)

4
ответ дан 1 December 2019 в 06:18
поделиться