Questions tagged [textarea]

A textarea is an HTML element (tag) used to create a multi-line plain-text editing field.

This tag should be used for questions related to the usage of the HTML <textarea> element.

A <textarea> is an HTML element (tag) used to create a multi-line plain-text editing field.

A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).

The size of a text area can be specified by the cols and rows attributes, or even better; through CSS height and width properties.

In HTML 5, the maxlength attribute enables you to specify a maximum length for your <textarea> element. This attribute was not supported in previous versions of HTML.

Resources

textarea definition on MDN

6376 questions

3234

votes

22 answers

How do I disable the resizable property of a textarea?

I want to disable the resizable property of a textarea. Currently, I can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse. How can I disable this?

html css textarea

asked Mar 08 '11 at 16:15

user549757

32,962
4
19
20

588

votes

28 answers

Set value of textarea in jQuery

I am attempting to set a value in a textarea field using jquery with the following code: $("textarea#ExampleMessage").attr("value", result.exampleMessage); The issue is, once this code executes, it is not altering the text in the textarea? However…

jquery textarea

asked Jan 06 '09 at 06:03

GONeale

26,302
21
106
149

514

votes

47 answers

Creating a textarea with auto-resize

There was another thread about this, which I've tried. But there is one problem: the textarea doesn't shrink if you delete the content. I can't find any way to shrink it to the correct size - the clientHeight value comes back as the full size of the…

javascript html resize height textarea

asked Jan 17 '09 at 22:30

DisgruntledGoat

70,219
68
205
290

434

votes

10 answers

How to add default value for html ?</a></h3> <div class="excerpt">I want to set a default value for my html <textarea>. I read from a material that to add default value you have to do something like <textarea>This is default text. I did that but it doesn't work. What's the right thing to do?

html textarea

asked May 15 '11 at 07:59

Newbie Coder

10,684
19
41
53

391

votes

13 answers

Should I size a textarea with CSS width / height or HTML cols / rows attributes?

Every time I develop a new form that includes a textarea I have the following dilemma when I need to specify its dimensions: Use CSS or use the textarea's attributes cols and rows? What are the pros and cons of each method? What are the semantics of…

html css textarea

asked Oct 09 '10 at 08:05

Pherrymason

7,835
8
39
57

370

votes

23 answers

Why is textarea filled with mysterious white spaces?

I have a simple text area in a form like this: I keep getting extra white…

php html forms textarea

asked Feb 04 '10 at 20:35

Afamee

5,160
9
38
43

358

votes

15 answers

How to add a new line in textarea element?

I want to add a newline in a textarea. I tried with \n and
tag but are not working. You can see above the HTML code. Can you help me to insert a newline in a textarea?

This is my statement one.\n This is my…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> 
                
                <a href="../../questions/tagged/textarea" class="post-tag grid--cell" title="show questions tagged 'textarea'" rel="tag">textarea</a> 
                
                <a href="../../questions/tagged/line-breaks" class="post-tag grid--cell" title="show questions tagged 'line-breaks'" rel="tag">line-breaks</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Dec 25 '11 at 02:12">asked Dec 25 '11 at 02:12</time>
    <a href="../../users/1104027/discky" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/1104027.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="discky" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/1104027/discky" class="s-user-card--link">discky</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">14,859</li>
            <li class="s-award-bling s-award-bling__gold" title="8 gold badges">8</li>
            <li class="s-award-bling s-award-bling__silver" title="20 silver badges">20</li>
            <li class="s-award-bling s-award-bling__bronze" title="11 bronze badges">11</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-10186913">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>247</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>8</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/10186913/html5-textarea-placeholder-not-appearing" class="question-hyperlink">HTML5 textarea placeholder not appearing</a></h3>
        <div class="excerpt">I cannot figure out what is wrong with my markup, but the placeholder for the text area will not appear. It seems as though it may be covered up with some blank spaces and tabs. When you focus on the text area and delete from where the cursor puts…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> 
                
                <a href="../../questions/tagged/forms" class="post-tag grid--cell" title="show questions tagged 'forms'" rel="tag">forms</a> 
                
                <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> 
                
                <a href="../../questions/tagged/textarea" class="post-tag grid--cell" title="show questions tagged 'textarea'" rel="tag">textarea</a> 
                
                <a href="../../questions/tagged/placeholder" class="post-tag grid--cell" title="show questions tagged 'placeholder'" rel="tag">placeholder</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Apr 17 '12 at 07:23">asked Apr 17 '12 at 07:23</time>
    <a href="../../users/1338065/rojobuffalo" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/1338065.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="rojobuffalo" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/1338065/rojobuffalo" class="s-user-card--link">rojobuffalo</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">3,113</li>
            <li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li>
            <li class="s-award-bling s-award-bling__silver" title="15 silver badges">15</li>
            <li class="s-award-bling s-award-bling__bronze" title="16 bronze badges">16</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-11076975">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>197</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>14</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/11076975/how-to-insert-text-into-the-textarea-at-the-current-cursor-position" class="question-hyperlink">How to insert text into the textarea at the current cursor position?</a></h3>
        <div class="excerpt">I would like to create a simple function that adds text into a text area at the user's cursor position. It needs to be a clean function. Just the basics. I can figure out the rest.  
</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/textarea" class="post-tag grid--cell" title="show questions tagged 'textarea'" rel="tag">textarea</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jun 18 '12 at 04:37">asked Jun 18 '12 at 04:37</time>
    <a href="../../users/971153/joshmwilliams" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/971153.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="JoshMWilliams" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/971153/joshmwilliams" class="s-user-card--link">JoshMWilliams</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">2,254</li>
            <li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li>
            <li class="s-award-bling s-award-bling__silver" title="17 silver badges">17</li>
            <li class="s-award-bling s-award-bling__bronze" title="14 bronze badges">14</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-6637341">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>194</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status ">
                <strong>31</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/6637341/use-tab-to-indent-in-textarea" class="question-hyperlink">Use tab to indent in textarea</a></h3>
        <div class="excerpt">I have a simple HTML textarea on my site.
Right now, if you click Tab in it, it goes to the next field. I would like to make the tab button indent a few spaces instead.
How can I do this?
</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> 
                
                <a href="../../questions/tagged/textarea" class="post-tag grid--cell" title="show questions tagged 'textarea'" rel="tag">textarea</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jul 09 '11 at 20:42">asked Jul 09 '11 at 20:42</time>
    <a href="../../users/780483/user780483" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/780483.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="user780483" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/780483/user780483" class="s-user-card--link">user780483</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">2,903</li>
            <li class="s-award-bling s-award-bling__gold" title="10 gold badges">10</li>
            <li class="s-award-bling s-award-bling__silver" title="29 silver badges">29</li>
            <li class="s-award-bling s-award-bling__bronze" title="32 bronze badges">32</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-4705848">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>192</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>7</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/4705848/rendering-html-inside-textarea" class="question-hyperlink">Rendering HTML inside textarea</a></h3>
        <div class="excerpt">I need to be able to render some HTML tags inside a textarea (namely <strong>, <i>, <u>, <a>) but textareas only interpret their content as text. Is there an easy way of doing it without relying on external libraries/plugins (I'm using jQuery)?
If…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/jquery" class="post-tag grid--cell" title="show questions tagged 'jquery'" rel="tag">jquery</a> 
                
                <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> 
                
                <a href="../../questions/tagged/textarea" class="post-tag grid--cell" title="show questions tagged 'textarea'" rel="tag">textarea</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Jan 16 '11 at 14:23">asked Jan 16 '11 at 14:23</time>
    <a href="../../users/559940/the-coding-monk" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/559940.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="The Coding Monk" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/559940/the-coding-monk" class="s-user-card--link">The Coding Monk</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">7,684</li>
            <li class="s-award-bling s-award-bling__gold" title="12 gold badges">12</li>
            <li class="s-award-bling s-award-bling__silver" title="41 silver badges">41</li>
            <li class="s-award-bling s-award-bling__bronze" title="56 bronze badges">56</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-863779">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>179</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>9</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/863779/how-to-add-line-breaks-to-an-html-textarea" class="question-hyperlink">How to add line breaks to an HTML textarea</a></h3>
        <div class="excerpt">I’m editing a <textarea> with JavaScript. The problem is that when I make line breaks in it, they won’t display. How can I do this?
I’m getting the value to write a function, but it won’t give line breaks.
</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> 
                
                <a href="../../questions/tagged/textarea" class="post-tag grid--cell" title="show questions tagged 'textarea'" rel="tag">textarea</a> 
                
                <a href="../../questions/tagged/line-breaks" class="post-tag grid--cell" title="show questions tagged 'line-breaks'" rel="tag">line-breaks</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked May 14 '09 at 14:52">asked May 14 '09 at 14:52</time>
    <a href="../../users/105419/djairo" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/105419.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="djairo" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/105419/djairo" class="s-user-card--link">djairo</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">2,655</li>
            <li class="s-award-bling s-award-bling__gold" title="4 gold badges">4</li>
            <li class="s-award-bling s-award-bling__silver" title="20 silver badges">20</li>
            <li class="s-award-bling s-award-bling__bronze" title="13 bronze badges">13</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-6961526">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>179</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>5</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/6961526/what-is-the-correct-value-for-the-disabled-attribute" class="question-hyperlink">What is the correct value for the disabled attribute?</a></h3>
        <div class="excerpt">What is the correct value for the disabled attribute for a textbox or textarea?
I've seen the following used before:
<input type="text" disabled />
<input type="text" disabled="disabled" />
<input type="text" disabled="true" />

</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> 
                
                <a href="../../questions/tagged/textbox" class="post-tag grid--cell" title="show questions tagged 'textbox'" rel="tag">textbox</a> 
                
                <a href="../../questions/tagged/textarea" class="post-tag grid--cell" title="show questions tagged 'textarea'" rel="tag">textarea</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Aug 05 '11 at 19:19">asked Aug 05 '11 at 19:19</time>
    <a href="../../users/811001/tskuzzy" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/811001.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="tskuzzy" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/811001/tskuzzy" class="s-user-card--link">tskuzzy</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">35,812</li>
            <li class="s-award-bling s-award-bling__gold" title="14 gold badges">14</li>
            <li class="s-award-bling s-award-bling__silver" title="73 silver badges">73</li>
            <li class="s-award-bling s-award-bling__bronze" title="140 bronze badges">140</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-263743">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>178</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>4</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/263743/how-to-get-the-caret-column-not-pixels-position-in-a-textarea-in-characters-fr" class="question-hyperlink">How to get the caret column (not pixels) position in a textarea, in characters, from the start?</a></h3>
        <div class="excerpt">How do you get the caret position in a <textarea> using JavaScript?
For example: This is| a text
This should return 7.
How would you get it to return the strings surrounding the cursor / selection?
E.g.: 'This is', '', ' a text'.
If the word “is” is…</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> 
                
                <a href="../../questions/tagged/textarea" class="post-tag grid--cell" title="show questions tagged 'textarea'" rel="tag">textarea</a> 
                
                <a href="../../questions/tagged/caret" class="post-tag grid--cell" title="show questions tagged 'caret'" rel="tag">caret</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Nov 04 '08 at 22:36">asked Nov 04 '08 at 22:36</time>
    <a href="../../users/32941/restless-wanderer" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/32941.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Restless Wanderer" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/32941/restless-wanderer" class="s-user-card--link">Restless Wanderer</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">1,873</li>
            <li class="s-award-bling s-award-bling__gold" title="3 gold badges">3</li>
            <li class="s-award-bling s-award-bling__silver" title="14 silver badges">14</li>
            <li class="s-award-bling s-award-bling__bronze" title="7 bronze badges">7</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>
                
                    <div class="mln24">
                    <div class="question-summary" id="question-summary-657795">
    <div class="statscontainer">
        <div class="stats">
            <div class="vote">
                <div class="votes">
                    <span class="vote-count-post"><strong>177</strong></span>
                    <div class="viewcount">votes</div>
                </div>
            </div>

<div class="status answered-accepted">
                <strong>6</strong> answers
            </div>
        </div>
    </div>
    <div class="summary">
        
        <h3><a href="../../questions/657795/how-to-remove-word-wrap-from-textarea" class="question-hyperlink">How to remove word wrap from textarea?</a></h3>
        <div class="excerpt">my simple textarea doesn't show a horizontal bar when text overflows. It wraps text for a new line. So how do I remove wordwrap and display horizontal bar when text overflows?
</div>
        <div class="grid ai-start jc-space-between fw-wrap">
            <div class="grid gs4 fw-wrap tags ">
                
                <a href="../../questions/tagged/html" class="post-tag grid--cell" title="show questions tagged 'html'" rel="tag">html</a> 
                
                <a href="../../questions/tagged/textarea" class="post-tag grid--cell" title="show questions tagged 'textarea'" rel="tag">textarea</a> 
                
                <a href="../../questions/tagged/word-wrap" class="post-tag grid--cell" title="show questions tagged 'word-wrap'" rel="tag">word-wrap</a> 
                
            </div>
            <div class="started mt0">
                
                    
<div class="s-user-card s-user-card">
    <time class="s-user-card--time" datetime="asked Mar 18 '09 at 11:03">asked Mar 18 '09 at 11:03</time>
    <a href="../../users/44533/stoneheart" class="s-avatar s-avatar__32 s-user-card--avatar">
        <img class="s-avatar--image" src="../../users/profiles/44533.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="StoneHeart" />
    </a>
    <div class="s-user-card--info">
        <a href="../../users/44533/stoneheart" class="s-user-card--link">StoneHeart</a>
        <ul class="s-user-card--awards">
            <li class="s-user-card--rep" title="reputation score">15,790</li>
            <li class="s-award-bling s-award-bling__gold" title="32 gold badges">32</li>
            <li class="s-award-bling s-award-bling__silver" title="67 silver badges">67</li>
            <li class="s-award-bling s-award-bling__bronze" title="84 bronze badges">84</li>
        </ul>
    </div>
</div>

</div>
        </div>
    </div>
</div>
                    </div>

</div>
        </div>

</div>
        </div>
        <script src="../../static/js/stack-icons.js"></script>
        <script src="../../static/js/fromnow.js"></script>
        
    </body>
</html>