If I want my textarea to be hidden, how do I do it?

后端 未结 6 1536
执笔经年
执笔经年 2021-01-04 01:00

If I want my textarea to be hidden, how do I do it?

相关标签:
6条回答
  • 2021-01-04 01:28

    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 and it won't reserve space on the screen—no gaps, in other words, where it would have been. Visual example below.

    So you want something like this to be totally hidden:

    <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>

    0 讨论(0)
  • 2021-01-04 01:30

    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>
    
    0 讨论(0)
  • 2021-01-04 01:34

    You have a few options, here are some examples:

    1. Display:none
    2. 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

    0 讨论(0)
  • 2021-01-04 01:41

    Using css: display: none; (this will make the textarea disappear completely, the space it would normally take up will not be reserved)

    0 讨论(0)
  • 2021-01-04 01:47
    <!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>
    
    0 讨论(0)
  • 2021-01-04 01:49

    Using the CSS visibility property should do the trick.

    0 讨论(0)
提交回复
热议问题