How do you restrict the number of rows in a ?</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-19T23:56:37.840" class="fromnow">Jul 19 '14 at 23:56</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2022-07-26T13:32:22.137" datetime="2022-07-26T13:32:22.137">Jul 26 '22 at 13:32</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 7,474 times"> <span class="fc-light mr2">Viewed</span> 7,474 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="24846089" data-ownerid="1631224" data-score="2"> <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="24846089"> <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="2">2</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>Given this code:</p> <pre><code><textarea rows="4" cols="50"></textarea> </code></pre> <p>There are 4 rows to type.</p> <p>However, how would you apply CSS to disable another row when a user presses enter or when the text overflows to the 5th row?</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/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> <a href="../../questions/tagged/css" class="post-tag js-gps-track" title="show questions tagged 'css'" rel="tag">css</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 grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Jul 25 '22 at 20:38">edited Jul 25 '22 at 20:38</time> <a href="../../users/707111/ry" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/707111.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Ry-" /> </a> <div class="s-user-card--info"> <a href="../../users/707111/ry" class="s-user-card--link">Ry-</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">218,210</li> <li class="s-award-bling s-award-blinggold" title="55 gold badges">55</li> <li class="s-award-bling s-award-blingsilver" title="464 silver badges">464</li> <li class="s-award-bling s-award-blingbronze" title="476 bronze badges">476</li> </ul> </div> </div> </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 19 '14 at 23:56">asked Jul 19 '14 at 23:56</time> <a href="../../users/1631224/user1631224" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1631224.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="user1631224" /> </a> <div class="s-user-card--info"> <a href="../../users/1631224/user1631224" class="s-user-card--link">user1631224</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">409</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="6 silver badges">6</li> <li class="s-award-bling s-award-blingbronze" title="13 bronze badges">13</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </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">5 Answers<span style="display:none;" itemprop="answerCount">5</span></h2> </div> </div> </div> <a name="24846156"></a> <div id="answer-24846156" class="answer " data-answerid="24846156" data-ownerid="1518921" data-score="4" 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="24846156"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset 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="4">4</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>To limit rows (lines) use <a href="../../questions/tagged/javascript">JavaScript</a>. You will need to do this by the <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event" rel="nofollow noreferrer"><code>input</code></a> event,</p> <p>and to split the lines in an array you can use the <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split" rel="nofollow noreferrer"><code>String.prototype.split()</code></a>, after that the limit can be controlled with <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice" rel="nofollow noreferrer"><code>Array.prototype.slice(start, end)</code></a>, being <code>start</code> must have the <code>0</code>, which will be the first line obtained, and <code>end</code> being the maximum number of lines desired. Finally, we concatenate the array into a <em>string</em>.</p> <p>See example:</p> <blockquote> <p>Note that I used <code>setTimeout</code> to avoid multiple executions in case the user holds any key interruptly.</p> </blockquote> <p></p><div class="snippet" data-babel="false" data-console="false" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>function limitText(textarea, limit) { function limitLines() { // split lines var lines = textarea.value.split("\n"); if (lines.length > limit) { textarea.value = lines.slice(0, limit).join("\n"); } } // Limite on add event limitLines(); var timeout; textarea.addEventListener("input", function () { clearTimeout(timeout); timeout = setTimeout(limitLines, 1); }); } limitText(document.getElementById("txtField1"), 4); limitText(document.getElementById("txtField2"), 4);</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><textarea rows="4" cols="50" id="txtField1">1 2 3 4</textarea> <textarea rows="4" cols="50" id="txtField2">a b c d</textarea></code></pre> </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 grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2022-07-26T13:32:22.137" class="relativetime">Jul 26 '22 at 13:32</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Protomen</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jul 20 '14 at 00:12">answered Jul 20 '14 at 00:12</time> <a href="../../users/1518921/protomen" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1518921.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Protomen" /> </a> <div class="s-user-card--info"> <a href="../../users/1518921/protomen" class="s-user-card--link">Protomen</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">9,471</li> <li class="s-award-bling s-award-blinggold" title="9 gold badges">9</li> <li class="s-award-bling s-award-blingsilver" title="57 silver badges">57</li> <li class="s-award-bling s-award-blingbronze" title="124 bronze badges">124</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-24846156" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="24846156" 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-131885183" class="comment js-comment " data-comment-id="131885183" data-comment-owner-id="11471385" 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="comment131885183_24846156"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Your logic is not enough, it still expands row if you do copy and paste.</span> – <a href="../../users/11471385/dfx-nguyen" title="495 reputation" class="comment-user ">DFX Nguyễn</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24846089/how-do-you-restrict-the-number-of-rows-in-a-textarea#comment131885183_24846156"><span title="2022-12-08T04:15:26.753 License: CC BY-SA 4.0" class="relativetime-clean">Dec 08 '22 at 04:15</span></a></span> </div> </div> </li> <li id="comment-131885285" class="comment js-comment " data-comment-id="131885285" data-comment-owner-id="1518921" 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="comment131885285_24846156"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@DFXNguyễn You are right, it seems that if you paste the first line twice (or more) each time you paste it adds the limit line, I will try to revise it and let you know. Thanks!</span> – <a href="../../users/1518921/protomen" title="9,471 reputation" class="comment-user ">Protomen</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24846089/how-do-you-restrict-the-number-of-rows-in-a-textarea#comment131885285_24846156"><span title="2022-12-08T04:28:48.800 License: CC BY-SA 4.0" class="relativetime-clean">Dec 08 '22 at 04:28</span></a></span> </div> </div> </li> <li id="comment-131885306" class="comment js-comment " data-comment-id="131885306" data-comment-owner-id="11471385" 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="comment131885306_24846156"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thank you so much, btw if you keep writing text without `Enter`press, it'll break line and get over max-rows .</span> – <a href="../../users/11471385/dfx-nguyen" title="495 reputation" class="comment-user ">DFX Nguyễn</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24846089/how-do-you-restrict-the-number-of-rows-in-a-textarea#comment131885306_24846156"><span title="2022-12-08T04:31:26.540 License: CC BY-SA 4.0" class="relativetime-clean">Dec 08 '22 at 04:31</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="24846110"></a> <div id="answer-24846110" class="answer " data-answerid="24846110" data-ownerid="1540350" data-score="2" 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="24846110"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset 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="2">2</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><h2>Using a textarea</h2> <p>Too limit rows and characters in a textarea you can use my script I just made:</p> <p>JAVASCRIPT:</p> <pre><code>function textarealimit(textarea, rows, chars, rowsleft_id, charsleft_id) { var newValue; var valueSegments = textarea.value.split('\n'); if(rows != undefined && valueSegments.length > rows) { // too many rows newValue = valueSegments.slice(0, rows).join("\n"); } if(chars != undefined && textarea.value.length > chars) { // too many chars if(newValue != undefined) newValue = newValue.substring(0, chars); else newValue = textarea.value.substring(0, chars); } if(newValue != undefined) textarea.value = newValue; if(rowsleft_id != undefined) { if(textarea.value == "") document.getElementById(rowsleft_id).innerHTML = rows; else if(rows - valueSegments.length >= 0) document.getElementById(rowsleft_id).innerHTML = rows - valueSegments.length; } if(charsleft_id != undefined) { if(chars != undefined) document.getElementById(charsleft_id).innerHTML = chars - textarea.value.length; } } </code></pre> <p>HTML:</p> <pre><code><textarea onkeydown="textarealimit(this, 4, 43, 'textarea_rowsleft', 'textarea_charsleft');" onkeyup="textarealimit(this, 4, 43, 'textarea_rowsleft', 'textarea_charsleft');" onpaste="textarealimit(this, 4, 43, 'textarea_rowsleft', 'textarea_charsleft');" rows="4" style="overflow: hidden; resize: none;"> </textarea> <div> Rows left: <span id="textarea_rowsleft">4</span> Characters left: <span id="textarea_charsleft">43</span> </div> </code></pre> <p>If you use HTML5 you can even limit the characters by the <code>maxlength</code> attribute on the textarea control. If you do not want to show the rows or chars left, just use <code>onkey....="textarealimit(this, 4, 43);"</code>. You can even only limit the rows by using <code>onkey....="textarealimit(this, 4);"</code>.</p> <p>Here is a demo for you: <a class="external-link" href="http://jsfiddle.net/AmFnA/9/" rel="nofollow">http://jsfiddle.net/AmFnA/9/</a></p> <p>The only limitation appears when the user gets new rows by auto line breaks due to the width limitation, so without pressing ENTER, because it will NOT count as new row. Also, you have to use keydown (when the user presses and holds this fires all the time), keyup (when the user releases, fires even when pressing ENTER) and onpaste (for richtclick -> paste), always.</p> <p>Thanks to Guilherme for reminding me on the paste part with his shorter version of that solution.</p> <hr/> <h2>Using multiple input fields</h2> <p>Now there is another alternative Jukka mentioned. You can use an input field for each row. This will prevent the user to get line breaks automatically. Here you can even listen up the keys to send the cursor to the next or previous box on the right conditions.</p> <p>Build up your rows with input fields in your HTML:</p> <pre><code><div class="rowfield_collection"> <input id="rowfield1" class="rowfield top" onkeydown="rowfieldkeynav(event, undefined, 'rowfield2');" type="text" size="35" maxlength="30" /> <input id="rowfield2" class="rowfield middle" onkeydown="rowfieldkeynav(event, 'rowfield1', 'rowfield3');" type="text" size="35" maxlength="30" /> <input id="rowfield3" class="rowfield middle" onkeydown="rowfieldkeynav(event, 'rowfield2', 'rowfield4');" type="text" size="35" maxlength="30" /> <input id="rowfield4" class="rowfield bottom" onkeydown="rowfieldkeynav(event, 'rowfield3', undefined);" type="text" size="35" maxlength="30" /> </div> </code></pre> <p>As you see, every input field got its own ID and you refer previous and next input field in the rowfieldkeynav call.</p> <p>To style it and look it like a textarea you can use this CSS:</p> <pre><code>.rowfield { margin: 0 0 -1px 0; display: block; } .rowfield.top { border-bottom: 0; } .rowfield.middle { border-top: 0; border-bottom: 0; } .rowfield.bottom { border-top: 0; } </code></pre> <p>And finally the JAVASCRIPT function:</p> <pre><code>function rowfieldkeynav(e, before_id, after_id) { var evtobj = window.event ? event : e //distinguish between IE's explicit event object (window.event) and Firefox's implicit. var unicode = evtobj.charCode ? evtobj.charCode : evtobj.keyCode; if(before_id != undefined && e.currentTarget.value.length == 0 && unicode == 08) { // BACKSPACE document.getElementById(before_id).focus(); } else if(after_id != undefined && unicode == 13 || e.currentTarget.value.length >= e.currentTarget.maxLength) { // ENTER or end of row reached document.getElementById(after_id).focus(); } } </code></pre> <p>It will jump to the previous input field when the current input field is empty and you press BACKSPACE. It will jump to the next input field when you press ENTER or reach the maxlength length.</p> <p>And again, here a demo for you: <a class="external-link" href="http://jsfiddle.net/6KVMS/2/" rel="nofollow">http://jsfiddle.net/6KVMS/2/</a></p> <p>The only few downsides on this method are:</p> <ul> <li>It will jump into a new line in the middle of a word, so it will not take the current word with you into the new input field.</li> <li>You cannot select more than one row when using your mouse.</li> <li>You can jump in the next rows by clicking there</li> <li>If you remove a row above another filled row, the text will not go up</li> <li>IE8 and perhabs lower cries a bit: It will not skip to the next field when the row is full</li> </ul></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="user-info "> <div class="user-action-time">edited <span title="2014-07-26T22:39:44.353" class="relativetime">Jul 26 '14 at 22:39</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Martin Braun</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jul 20 '14 at 00:00">answered Jul 20 '14 at 00:00</time> <a href="../../users/1540350/martin-braun" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1540350.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Martin Braun" /> </a> <div class="s-user-card--info"> <a href="../../users/1540350/martin-braun" class="s-user-card--link">Martin Braun</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">10,906</li> <li class="s-award-bling s-award-blinggold" title="9 gold badges">9</li> <li class="s-award-bling s-award-blingsilver" title="64 silver badges">64</li> <li class="s-award-bling s-award-blingbronze" title="105 bronze badges">105</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-24846110" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="24846110" 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-38755702" class="comment js-comment " data-comment-id="38755702" data-comment-owner-id="1518921" 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="comment38755702_24846110"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Just to be clear, I added the first answer on ROWS (it was a question of OP) on "Jul 20 at 0:12" and you just added (edit your question) on ROWS on "Jul 20 at 11:18".</span> – <a href="../../users/1518921/protomen" title="9,471 reputation" class="comment-user ">Protomen</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24846089/how-do-you-restrict-the-number-of-rows-in-a-textarea#comment38755702_24846110"><span title="2014-07-24T16:19:48.683 License: CC BY-SA 3.0" class="relativetime-clean">Jul 24 '14 at 16:19</span></a></span> </div> </div> </li> <li id="comment-38785374" class="comment js-comment " data-comment-id="38785374" data-comment-owner-id="1540350" 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="comment38785374_24846110"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@GuilhermeNascimento So what? When I came back from fiddle finishing this I did not mention another person did something similar like the first part of my answer now. Should I not correct my solutions with my own creations to help the OP, just because another person did something similar?</span> – <a href="../../users/1540350/martin-braun" title="10,906 reputation" class="comment-user ">Martin Braun</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24846089/how-do-you-restrict-the-number-of-rows-in-a-textarea#comment38785374_24846110"><span title="2014-07-25T11:42:47.970 License: CC BY-SA 3.0" class="relativetime-clean">Jul 25 '14 at 11:42</span></a></span> </div> </div> </li> <li id="comment-38795879" class="comment js-comment " data-comment-id="38795879" data-comment-owner-id="1518921" 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="comment38795879_24846110"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">If another user posts a more correct answer that I realize I give my support to this user commenting on my own response and commenting on it or answer (usually give a upvote), this is to be a community, that is to have chivalry.</span> – <a href="../../users/1518921/protomen" title="9,471 reputation" class="comment-user ">Protomen</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24846089/how-do-you-restrict-the-number-of-rows-in-a-textarea#comment38795879_24846110"><span title="2014-07-25T16:40:17.073 License: CC BY-SA 3.0" class="relativetime-clean">Jul 25 '14 at 16:40</span></a></span> </div> </div> </li> <li id="comment-38825336" class="comment js-comment " data-comment-id="38825336" data-comment-owner-id="1540350" 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="comment38825336_24846110"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@GuilhermeNascimento I fully agree with you, unless I did not read your answer before. So I don't think it would be appropriate of myself for doing that. But, you handled the paste part and yours is shorter. I will correct my answer with the paste part and take the chivalry with me as I did on Jukka.</span> – <a href="../../users/1540350/martin-braun" title="10,906 reputation" class="comment-user ">Martin Braun</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24846089/how-do-you-restrict-the-number-of-rows-in-a-textarea#comment38825336_24846110"><span title="2014-07-26T22:36:48.977 License: CC BY-SA 3.0" class="relativetime-clean">Jul 26 '14 at 22:36</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="24846166"></a> <div id="answer-24846166" class="answer " data-answerid="24846166" data-ownerid="3812472" data-score="1" 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="24846166"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset 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="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You could do something like this in CSS:</p> <pre><code>textarea { overflow:hidden; resize:none; } </code></pre> <p>This will turn off the possibility of resizing the textarea and hides everything except the number of rows specified. </p> <p>Additionally you may wish to restrict the amount of characters for the textarea via <code>maxlength</code> (<a class="external-link" href="http://www.w3schools.com/tags/att_textarea_maxlength.asp" rel="nofollow">Spec</a>) which is possible since HTML5.</p></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="edited Jul 20 '14 at 00:30">edited Jul 20 '14 at 00:30</time> <a href="../../users/82548/david-thomas" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/82548.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="David Thomas" /> </a> <div class="s-user-card--info"> <a href="../../users/82548/david-thomas" class="s-user-card--link">David Thomas</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">249,100</li> <li class="s-award-bling s-award-blinggold" title="51 gold badges">51</li> <li class="s-award-bling s-award-blingsilver" title="377 silver badges">377</li> <li class="s-award-bling s-award-blingbronze" title="410 bronze badges">410</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Jul 20 '14 at 00:14">answered Jul 20 '14 at 00:14</time> <a href="../../users/3812472/svschmidt" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3812472.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="SVSchmidt" /> </a> <div class="s-user-card--info"> <a href="../../users/3812472/svschmidt" class="s-user-card--link">SVSchmidt</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">6,269</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="26 silver badges">26</li> <li class="s-award-bling s-award-blingbronze" title="37 bronze badges">37</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-24846166" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="24846166" 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-38586053" class="comment js-comment " data-comment-id="38586053" data-comment-owner-id="1084437" 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="comment38586053_24846166"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This does not prevent the user from entering any number of lines. It just prevents him from seeing all he has typed and from using a scrollbar.</span> – <a href="../../users/1084437/jukka-k-korpela" title="195,524 reputation" class="comment-user ">Jukka K. Korpela</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24846089/how-do-you-restrict-the-number-of-rows-in-a-textarea#comment38586053_24846166"><span title="2014-07-20T10:30:08.237 License: CC BY-SA 3.0" class="relativetime-clean">Jul 20 '14 at 10:30</span></a></span> </div> </div> </li> <li id="comment-38589747" class="comment js-comment " data-comment-id="38589747" data-comment-owner-id="3812472" 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="comment38589747_24846166"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">No of the suggested solutions does prevent the user from typing more text than he's allowed to since they're client-side. The best attempt will be a combination of `overflow:hidden;`, `resize:none;`, `maxlength` and a server-side check.</span> – <a href="../../users/3812472/svschmidt" title="6,269 reputation" class="comment-user ">SVSchmidt</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24846089/how-do-you-restrict-the-number-of-rows-in-a-textarea#comment38589747_24846166"><span title="2014-07-20T14:34:32.927 License: CC BY-SA 3.0" class="relativetime-clean">Jul 20 '14 at 14:34</span></a></span> </div> </div> </li> <li id="comment-38593441" class="comment js-comment " data-comment-id="38593441" data-comment-owner-id="1084437" 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="comment38593441_24846166"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">The point is that these CSS settings do not impose a restriction on the number of lines even in the client-side sense; they only affect what input is visible.</span> – <a href="../../users/1084437/jukka-k-korpela" title="195,524 reputation" class="comment-user ">Jukka K. Korpela</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/24846089/how-do-you-restrict-the-number-of-rows-in-a-textarea#comment38593441_24846166"><span title="2014-07-20T18:05:13.273 License: CC BY-SA 3.0" class="relativetime-clean">Jul 20 '14 at 18:05</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="24849597"></a> <div id="answer-24849597" class="answer " data-answerid="24849597" data-ownerid="1084437" data-score="1" 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="24849597"> <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="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You cannot set such restrictions in CSS. You can set a maximum number of characters in HTML, but that’s not the same thing. You can use JavaScript that counts the lines and imposes restrictictions.</p> <p>Normally, the best approach would seem to be to avoid the problem: instead of a <code>textarea</code> element, use four <code>input</code> elements. The downside is that the user needs to tab to the next field instead of just pressing Enter.</p></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 Jul 20 '14 at 10:31">answered Jul 20 '14 at 10:31</time> <a href="../../users/1084437/jukka-k-korpela" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1084437.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Jukka K. Korpela" /> </a> <div class="s-user-card--info"> <a href="../../users/1084437/jukka-k-korpela" class="s-user-card--link">Jukka K. Korpela</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">195,524</li> <li class="s-award-bling s-award-blinggold" title="37 gold badges">37</li> <li class="s-award-bling s-award-blingsilver" title="270 silver badges">270</li> <li class="s-award-bling s-award-blingbronze" title="390 bronze badges">390</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="24846137"></a> <div id="answer-24846137" class="answer " data-answerid="24846137" data-ownerid="2438423" 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="24846137"> <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>The HTML <code>maxlength</code> attribute could be used, but HTML, CSS, and JavaScript can be hacked. Do a Sever side check to be sure. Client side should also be used, but won't prevent a potential issue.</p></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 Jul 20 '14 at 00:08">answered Jul 20 '14 at 00:08</time> <a href="../../users/2438423/stackslave" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2438423.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="StackSlave" /> </a> <div class="s-user-card--info"> <a href="../../users/2438423/stackslave" class="s-user-card--link">StackSlave</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">10,613</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="18 silver badges">18</li> <li class="s-award-bling s-award-blingbronze" title="35 bronze badges">35</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> <div id="sidebar" class="show-votes" role="complementary" aria-label="sidebar"> <div class="module sidebar-linked"> <h4 id="h-linked">Linked</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/75290493/stop-user-from-typing-in-a-textarea-after-reaching-row-limit" class="question-hyperlink">Stop user from typing in a textarea after reaching row limit?</a> </div> </div> </div> <div class="module sidebar-linked"> <h4 id="h-linked">Related</h4> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/75290493/stop-user-from-typing-in-a-textarea-after-reaching-row-limit" class="question-hyperlink">Stop user from typing in a textarea after reaching row limit?</a> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>