Если я хочу, чтобы моя текстовая область была скрыта, как мне это сделать? - PullRequest
Новая
       5

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

14 голосов
/ 02 марта 2010

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

Ответы [ 6 ]

35 голосов
/ 02 марта 2010

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

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

<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>
6 голосов
/ 02 марта 2010

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

  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

4 голосов
/ 02 марта 2010

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

3 голосов
/ 22 января 2016

Скрытые занимают место на текущей веб-странице. 

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

Исчезает на текущей веб-странице без другого эффекта. 

<textarea style="display:none" ></textarea>
1 голос
/ 22 января 2016 
<!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>
1 голос
/ 02 марта 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...