Prevent resizing and scrolling of </a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2014-07-14T08:51:15.163" class="fromnow">Jul 14 '14 at 08:51</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2016-11-13T00:29:10.067" datetime="2016-11-13T00:29:10.067">Nov 13 '16 at 00:29</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 2,116 times"> <span class="fc-light mr2">Viewed</span> 2,116 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="24732742" data-ownerid="3378245" data-score="0"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="24732742"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I would like to add a <code><textarea></code> on my web page. Which can contain a maximum of 21 lines. I would like to prevent the re-sizing of the text area when more elements are coming to the page. I partially gain it by giving the <code>maxlength</code> property. But the count using line number is not effective. Because if someone give 1 new line and type some data then the line order will give a true value but the max length give wrong value. </p> <p><b>suppose if my textarea has <code>maxlength=100</code> and one line can contain upto 10 letters. And I limit the row number as 10. If I give 10 blank <code>enter</code> key press, then it will stop at line 10. And if I give 100 characters, then also it will work correctly. But if I type 1 character on !st line, Then Press <code>Enter</code> and one character on second line then press <code>Enter</code>. Then the text area will allow 98 more characters, which will resize the <code>textarea</code></b> </p> <p>Is there any way to prevent re-sizing using the width of textarea? Please help </p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/resize" class="post-tag js-gps-track" title="show questions tagged 'resize'" rel="tag">resize</a> <a href="../../questions/tagged/textarea" class="post-tag js-gps-track" title="show questions tagged 'textarea'" rel="tag">textarea</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jul 14 '14 at 08:51">asked Jul 14 '14 at 08:51</time> <a href="../../users/3378245/arun" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3378245.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Arun" /> </a> <div class="s-user-card--info"> <a href="../../users/3378245/arun" class="s-user-card--link">Arun</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">3,640</li> <li class="s-award-bling s-award-blinggold" title="7 gold badges">7</li> <li class="s-award-bling s-award-blingsilver" title="44 silver badges">44</li> <li class="s-award-bling s-award-blingbronze" title="87 bronze badges">87</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-24732742" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="24732742" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-38366564" class="comment js-comment " data-comment-id="38366564" data-comment-owner-id="2038464" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment38366564_24732742"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This answer shows how to limit lines with jQuery: http://stackoverflow.com/a/6501310/2038464 This answer shows how to prevent textarea resizing in chrome: http://stackoverflow.com/a/11401654/2038464</span> – <a href="../../users/2038464/oleg" title="1,659 reputation" class="comment-user ">Oleg</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24732742/prevent-resizing-and-scrolling-of-textarea#comment38366564_24732742"><span title="2014-07-14T08:58:41.140 License: CC BY-SA 3.0" class="relativetime-clean">Jul 14 '14 at 08:58</span></a></span> </div> </div> </li> <li id="comment-38367002" class="comment js-comment " data-comment-id="38367002" data-comment-owner-id="3378245" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment38367002_24732742"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Oleg: Thank you for the suggestion. I already tried this. But it wont satisfy the conditions which I given in question.. :(</span> – <a href="../../users/3378245/arun" title="3,640 reputation" class="comment-user owner">Arun</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24732742/prevent-resizing-and-scrolling-of-textarea#comment38367002_24732742"><span title="2014-07-14T09:12:25.087 License: CC BY-SA 3.0" class="relativetime-clean">Jul 14 '14 at 09:12</span></a></span> </div> </div> </li> <li id="comment-38387127" class="comment js-comment " data-comment-id="38387127" data-comment-owner-id="2038464" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment38387127_24732742"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Sorry, I don't think I understand your issue. Can you include the HTML and/ or JavaScript code you are using for this textarea? Also, what browser are you testing on?</span> – <a href="../../users/2038464/oleg" title="1,659 reputation" class="comment-user ">Oleg</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24732742/prevent-resizing-and-scrolling-of-textarea#comment38387127_24732742"><span title="2014-07-14T19:02:49.783 License: CC BY-SA 3.0" class="relativetime-clean">Jul 14 '14 at 19:02</span></a></span> </div> </div> </li> <li id="comment-38399764" class="comment js-comment " data-comment-id="38399764" data-comment-owner-id="3378245" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment38399764_24732742"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">[This fiddle](http://jsfiddle.net/arunsankars1989/Hm6Q8/) is helpfull. But it wont go to new line when one line is complete :(</span> – <a href="../../users/3378245/arun" title="3,640 reputation" class="comment-user owner">Arun</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24732742/prevent-resizing-and-scrolling-of-textarea#comment38399764_24732742"><span title="2014-07-15T05:50:15.850 License: CC BY-SA 3.0" class="relativetime-clean">Jul 15 '14 at 05:50</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">1 Answers<span style="display:none;" itemprop="answerCount">1</span></h2> </div> </div> </div> <a name="40569236"></a> <div id="answer-40569236" class="answer " data-answerid="40569236" data-ownerid="6901876" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="40569236"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Prevent resizing using CSS resize property:</p> <pre><code>.txt { resize: none; } </code></pre> <p>Prevent users from adding too many values into a textarea:</p> <pre><code><textarea maxlength="100" accesskey="10" row="10"></textarea> </code></pre> <p>Final code:</p> <pre><code><textarea maxlength="100" class="txt" accesskey="10" row="10" style="resize:none"> My text is </textarea> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Nov 13 '16 at 00:29">answered Nov 13 '16 at 00:29</time> <a href="../../users/6901876/cannicide" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/6901876.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Cannicide" /> </a> <div class="s-user-card--info"> <a href="../../users/6901876/cannicide" class="s-user-card--link">Cannicide</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">4,360</li> <li class="s-award-bling s-award-blinggold" title="3 gold badges">3</li> <li class="s-award-bling s-award-blingsilver" title="22 silver badges">22</li> <li class="s-award-bling s-award-bling__bronze" title="42 bronze badges">42</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-40569236" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="40569236" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-68374947" class="comment js-comment " data-comment-id="68374947" data-comment-owner-id="6901876" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment68374947_40569236"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This doesn't fully account for the 10 values per line argument in Chrome, IE, and Safari, but tested and works in Firefox and Opera (for whatever reason it worked in Opera but not Chrome when I tried it.)</span> – <a href="../../users/6901876/cannicide" title="4,360 reputation" class="comment-user ">Cannicide</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24732742/prevent-resizing-and-scrolling-of-textarea#comment68374947_40569236"><span title="2016-11-13T00:31:33.587 License: CC BY-SA 3.0" class="relativetime-clean">Nov 13 '16 at 00:31</span></a></span> </div> </div> </li> </ul> </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>