How to get number of rows in using JavaScript?</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="2009-11-19T03:07:42.653" class="fromnow">Nov 19 '09 at 03:07</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2020-02-20T05:31:24.600" datetime="2020-02-20T05:31:24.600">Feb 20 '20 at 05:31</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 55,492 times"> <span class="fc-light mr2">Viewed</span> 5.5k times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="1760629" data-ownerid="179364" data-score="34"> <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="1760629"> <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="34">34</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="11">11</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I have a <code><textarea></code> element. Can I use JavaScript to detect that there are (for example) 10 rows of text in it?</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/forms" class="post-tag js-gps-track" title="show questions tagged 'forms'" rel="tag">forms</a> <a href="../../questions/tagged/textarea" class="post-tag js-gps-track" title="show questions tagged 'textarea'" rel="tag">textarea</a> <a href="../../questions/tagged/rows" class="post-tag js-gps-track" title="show questions tagged 'rows'" rel="tag">rows</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 Feb 20 '20 at 05:31">edited Feb 20 '20 at 05:31</time> <a href="../../users/6392696/nourza" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/6392696.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="nourza" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/6392696/nourza" class="s-user-card--link">nourza</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,039</li> <li class="s-award-bling s-award-blinggold" title="2 gold badges">2</li> <li class="s-award-bling s-award-blingsilver" title="15 silver badges">15</li> <li class="s-award-bling s-award-blingbronze" title="28 bronze badges">28</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 Nov 19 '09 at 03:07">asked Nov 19 '09 at 03:07</time> <a href="../../users/179364/mask" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/179364.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mask" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/179364/mask" class="s-user-card--link">Mask</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">31,463</li> <li class="s-award-bling s-award-blinggold" title="47 gold badges">47</li> <li class="s-award-bling s-award-blingsilver" title="100 silver badges">100</li> <li class="s-award-bling s-award-blingbronze" title="125 bronze badges">125</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-1760629" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="1760629" 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-1644291" class="comment js-comment " data-comment-id="1644291" data-comment-owner-id="152083" 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="comment1644291_1760629"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">You might want to clarify your question so it doesn't look like you are trying to return the `rows=` attribute from the `textarea` element.</span> – <a href="../../users/152083/doug-neiner" title="64,147 reputation" class="comment-user ">Doug Neiner</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment1644291_1760629"><span title="2009-11-19T03:09:06.520 License: CC BY-SA 2.5" class="relativetime-clean">Nov 19 '09 at 03:09</span></a></span> </div> </div> </li> <li id="comment-1644335" class="comment js-comment " data-comment-id="1644335" data-comment-owner-id="106778" data-comment-score="3"> <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">3</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment1644335_1760629"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Why would you want to do this? I sense a bad requirement specification.</span> – <a href="../../users/106778/randell" title="6,018 reputation" class="comment-user ">Randell</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment1644335_1760629"><span title="2009-11-19T03:23:28.277 License: CC BY-SA 2.5" class="relativetime-clean">Nov 19 '09 at 03:23</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">7 Answers<span style="display:none;" itemprop="answerCount">7</span></h2> </div> </div> </div> <a name="1761203"></a> <div id="answer-1761203" class="answer " data-answerid="1761203" data-ownerid="145346" data-score="48" 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="1761203"> <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="48">48</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Well I found a much simplier way to do this, but you'll need to set the line-height of the textarea in the CSS. I tried to read the line height inside the script <code>ta.style.lineHeight</code> but it doesn't seem to return a value.</p> <p>CSS</p> <pre><code>#ta { width: 300px; line-height: 20px; } </code></pre> <p>HTML</p> <pre><code><textarea id="ta">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque suscipit, nisl eget dapibus condimentum, ipsum felis condimentum nisi, eget luctus est tortor vitae nunc. Nam ornare dictum augue, non bibendum sapien pulvinar ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras congue congue purus, quis imperdiet tellus ornare in. Nulla facilisi. Nulla elementum posuere odio ut ultricies. Nullam tempus tincidunt elit eget posuere. Pellentesque sit amet tellus sapien. Praesent sed iaculis turpis. Nam quis nibh diam, sed mattis orci. Nullam ornare adipiscing congue. In est orci, consectetur in feugiat non, consequat vitae dui. Mauris varius dui a dolor convallis iaculis.</textarea> </code></pre> <p>Script</p> <pre><code> var taLineHeight = 20; // This should match the line-height in the CSS var taHeight = ta.scrollHeight; // Get the scroll height of the textarea ta.style.height = taHeight; // This line is optional, I included it so you can more easily count the lines in an expanded textarea var numberOfLines = Math.floor(taHeight/taLineHeight); alert( "there are " + numberOfLines + " lines in the text area"); </code></pre> <hr/> <p>Update: Thanks to @Pebbl for working out the bugs, this is the code needed to get the height of the text content (<a class="external-link" href="http://jsfiddle.net/Mottie/PfD7L/100/" rel="noreferrer">demo</a>)</p> <pre><code>var calculateContentHeight = function( ta, scanAmount ) { var origHeight = ta.style.height, height = ta.offsetHeight, scrollHeight = ta.scrollHeight, overflow = ta.style.overflow; /// only bother if the ta is bigger than content if ( height >= scrollHeight ) { /// check that our browser supports changing dimension /// calculations mid-way through a function call... ta.style.height = (height + scanAmount) + 'px'; /// because the scrollbar can cause calculation problems ta.style.overflow = 'hidden'; /// by checking that scrollHeight has updated if ( scrollHeight < ta.scrollHeight ) { /// now try and scan the ta's height downwards /// until scrollHeight becomes larger than height while (ta.offsetHeight >= ta.scrollHeight) { ta.style.height = (height -= scanAmount)+'px'; } /// be more specific to get the exact height while (ta.offsetHeight < ta.scrollHeight) { ta.style.height = (height++)+'px'; } /// reset the ta back to it's original height ta.style.height = origHeight; /// put the overflow back ta.style.overflow = overflow; return height; } } else { return scrollHeight; } } var calculateHeight = function() { var ta = document.getElementById("ta"), style = (window.getComputedStyle) ? window.getComputedStyle(ta) : ta.currentStyle, // This will get the line-height only if it is set in the css, // otherwise it's "normal" taLineHeight = parseInt(style.lineHeight, 10), // Get the scroll height of the textarea taHeight = calculateContentHeight(ta, taLineHeight), // calculate the number of lines numberOfLines = Math.ceil(taHeight / taLineHeight); document.getElementById("lines").innerHTML = "there are " + numberOfLines + " lines in the text area"; }; calculateHeight(); if (ta.addEventListener) { ta.addEventListener("mouseup", calculateHeight, false); ta.addEventListener("keyup", calculateHeight, false); } else if (ta.attachEvent) { // IE ta.attachEvent("onmouseup", calculateHeight); ta.attachEvent("onkeyup", calculateHeight); } </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="user-info "> <div class="user-action-time">edited <span title="2015-03-17T12:32:45.983" class="relativetime">Mar 17 '15 at 12: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">Mottie</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 Nov 19 '09 at 06:05">answered Nov 19 '09 at 06:05</time> <a href="../../users/145346/mottie" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/145346.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mottie" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/145346/mottie" class="s-user-card--link">Mottie</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">79,894</li> <li class="s-award-bling s-award-blinggold" title="29 gold badges">29</li> <li class="s-award-bling s-award-blingsilver" title="121 silver badges">121</li> <li class="s-award-bling s-award-bling__bronze" title="237 bronze badges">237</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-1761203" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="1761203" 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-14406418" class="comment js-comment " data-comment-id="14406418" data-comment-owner-id="66226" data-comment-score="2"> <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">2</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment14406418_1761203"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">+1, this is by far the most reliable approach. One note: Ensure that the textarea starts with `rows=1`, or else its `scrollHeight` may be artificially high.</span> – <a href="../../users/66226/trevor-burnham" title="75,651 reputation" class="comment-user ">Trevor Burnham</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment14406418_1761203"><span title="2012-06-13T17:50:53.543 License: CC BY-SA 3.0" class="relativetime-clean">Jun 13 '12 at 17:50</span></a></span> </div> </div> </li> <li id="comment-18520042" class="comment js-comment " data-comment-id="18520042" data-comment-owner-id="1490904" 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="comment18520042_1761203"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Mottie the `.style` object will only ever return inline styles. To get the computed value you should use `window.getComputedStyle` and fallback to `Elm.currentStyle` for old IE. Other than that +1 :)</span> – <a href="../../users/1490904/pebbl" title="33,057 reputation" class="comment-user ">Pebbl</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment18520042_1761203"><span title="2012-11-23T10:22:33.020 License: CC BY-SA 3.0" class="relativetime-clean">Nov 23 '12 at 10:22</span></a></span> </div> </div> </li> <li id="comment-18527490" class="comment js-comment " data-comment-id="18527490" data-comment-owner-id="145346" 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="comment18527490_1761203"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thanks for the input @pebbl! I've combined the above suggestions and made [a demo](http://jsfiddle.net/Mottie/PfD7L/). Note that when you manually resize the textarea in modern browsers, the number of lines will change to match the resized height and not the content.</span> – <a href="../../users/145346/mottie" title="79,894 reputation" class="comment-user ">Mottie</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment18527490_1761203"><span title="2012-11-23T15:06:28.930 License: CC BY-SA 3.0" class="relativetime-clean">Nov 23 '12 at 15:06</span></a></span> </div> </div> </li> <li id="comment-18543385" class="comment js-comment " data-comment-id="18543385" data-comment-owner-id="1490904" data-comment-score="4"> <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">4</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment18543385_1761203"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Mottie nice one :) if you're interested I've combined some auto-resize textarea logic with your line count and so now it should be fullproof -- for most browsers -- even if the ta is larger than the content. http://jsfiddle.net/PfD7L/1/</span> – <a href="../../users/1490904/pebbl" title="33,057 reputation" class="comment-user ">Pebbl</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment18543385_1761203"><span title="2012-11-24T11:31:50.090 License: CC BY-SA 3.0" class="relativetime-clean">Nov 24 '12 at 11:31</span></a></span> </div> </div> </li> <li id="comment-46428712" class="comment js-comment " data-comment-id="46428712" data-comment-owner-id="145346" 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="comment46428712_1761203"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Pebbl I know it's been a few years, but I found a minor problem in the demo, the `numberOfLines` calculation should be using `Math.ceil()` instead of floor. I updated my answer; thanks again for your assistance :)</span> – <a href="../../users/145346/mottie" title="79,894 reputation" class="comment-user ">Mottie</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment46428712_1761203"><span title="2015-03-17T12:34:16.563 License: CC BY-SA 3.0" class="relativetime-clean">Mar 17 '15 at 12:34</span></a></span> </div> </div> </li> <li id="comment-84394069" class="comment js-comment " data-comment-id="84394069" data-comment-owner-id="364966" 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="comment84394069_1761203"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Is there a potential for an infinite loop on ```while (ta.offsetHeight >= ta.scrollHeight) { ta.style.height = (height -= scanAmount)+'px'; }```? ta.offsetHeight is unchanged by the loop, so the loop continues forever, no?</span> – <a href="../../users/364966/vikr" title="4,166 reputation" class="comment-user ">VikR</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment84394069_1761203"><span title="2018-02-09T02:02:19.467 License: CC BY-SA 3.0" class="relativetime-clean">Feb 09 '18 at 02:02</span></a></span> </div> </div> </li> <li id="comment-84394229" class="comment js-comment " data-comment-id="84394229" data-comment-owner-id="145346" 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="comment84394229_1761203"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Don't set the `scanAmount` to zero, and it shouldn't happen.</span> – <a href="../../users/145346/mottie" title="79,894 reputation" class="comment-user ">Mottie</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment84394229_1761203"><span title="2018-02-09T02:12:42.113 License: CC BY-SA 3.0" class="relativetime-clean">Feb 09 '18 at 02:12</span></a></span> </div> </div> </li> <li id="comment-84623556" class="comment js-comment " data-comment-id="84623556" data-comment-owner-id="819449" data-comment-score="2"> <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">2</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment84623556_1761203"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">i have lineHeight=20 and textarea height=40, while i adding text, calculateContentHeight returning 21, 41, 60, 80, 100. `(height++)+'px'` need to be replaced by `(++height)+'px'`</span> – <a href="../../users/819449/matveev-dmitriy" title="372 reputation" class="comment-user ">Matveev Dmitriy</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment84623556_1761203"><span title="2018-02-15T14:56:27.917 License: CC BY-SA 3.0" class="relativetime-clean">Feb 15 '18 at 14:56</span></a></span> </div> </div> </li> <li id="comment-94732929" class="comment js-comment " data-comment-id="94732929" data-comment-owner-id="" 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="comment94732929_1761203"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@VikR, actually we hit infinite loop here with crome and 75% scale. Chrome DOM reported strange sizes here, so we decided to use similar approach as http://www.jacklmoore.com/autosize/ uses without loops</span> – <a class="comment-user "></a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment94732929_1761203"><span title="2018-12-27T15:25:25.280 License: CC BY-SA 4.0" class="relativetime-clean">Dec 27 '18 at 15:25</span></a></span> </div> </div> </li> <li id="comment-121606098" class="comment js-comment " data-comment-id="121606098" data-comment-owner-id="1785053" 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="comment121606098_1761203"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Hello @Mottie. Thanks for this answer works just fine. Can you or someone else explain little bit more why we need this line :ta.style.height = (height + scanAmount) + 'px'; and why do we need the two while statements.</span> – <a href="../../users/1785053/ilce" title="945 reputation" class="comment-user ">ilce</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment121606098_1761203"><span title="2021-08-16T21:27:32.760 License: CC BY-SA 4.0" class="relativetime-clean">Aug 16 '21 at 21:27</span></a></span> </div> </div> </li> <li id="comment-121633119" class="comment js-comment " data-comment-id="121633119" data-comment-owner-id="145346" 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="comment121633119_1761203"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">All `textarea`s have a default height, or a height set using the [`rows` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows). If the content height is less than this value, the resulting count is inaccurate. The first `while` loop reduces the height by `scanAmount` (line height) until it is it greater than or equal to the content height. The second `while` loop expands the height 1 pixel at a time until it matches. If you only need a rough estimate, use the code in the first snippet (5 lines of code).</span> – <a href="../../users/145346/mottie" title="79,894 reputation" class="comment-user ">Mottie</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment121633119_1761203"><span title="2021-08-17T21:58:21.107 License: CC BY-SA 4.0" class="relativetime-clean">Aug 17 '21 at 21:58</span></a></span> </div> </div> </li> <li id="comment-124196473" class="comment js-comment " data-comment-id="124196473" data-comment-owner-id="11771808" 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="comment124196473_1761203"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Mottie Sorry, I don't understand why the scans are there at all. Once you set the textarea height to zero like `ta.style.height = 0` you may read the `ta.scrollHeight` right away to get the precise content height in pixels. So the code will look like: `var origHeight = ta.style.height; ta.style.heihgt = '0'; height = ta.scrollHeight; ta.style.height = origHeight;` Do I miss somtthing?</span> – <a href="../../users/11771808/sergey" title="53 reputation" class="comment-user ">Sergey</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment124196473_1761203"><span title="2021-12-07T09:43:14.313 License: CC BY-SA 4.0" class="relativetime-clean">Dec 07 '21 at 09:43</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="19525585"></a> <div id="answer-19525585" class="answer " data-answerid="19525585" data-ownerid="2196608" data-score="5" 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="19525585"> <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="5">5</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Just one js line:</p> <pre><code>var rows = document.querySelector('textarea').value.split("\n").length; </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 Oct 22 '13 at 18:29">answered Oct 22 '13 at 18:29</time> <a href="../../users/2196608/ionut-bajescu" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/2196608.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Ionut Bajescu" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/2196608/ionut-bajescu" class="s-user-card--link">Ionut Bajescu</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,193</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="10 silver badge">10</li> <li class="s-award-bling s-award-bling__bronze" title="9 bronze badge">9</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-19525585" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="19525585" 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-53001845" class="comment js-comment " data-comment-id="53001845" data-comment-owner-id="2561509" 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="comment53001845_19525585"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">I've run into problems with this one, depending on the OS. In particular the difference between \r, \r\n, \n\r, and \n. I don't remember exactly why, but it was actually quite difficult to exhaustively do it this way.</span> – <a href="../../users/2561509/mike" title="1,278 reputation" class="comment-user ">mike</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment53001845_19525585"><span title="2015-09-14T20:28:33.357 License: CC BY-SA 3.0" class="relativetime-clean">Sep 14 '15 at 20:28</span></a></span> </div> </div> </li> <li id="comment-76065563" class="comment js-comment " data-comment-id="76065563" data-comment-owner-id="4561047" data-comment-score="34"> <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">34</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment76065563_19525585"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">What if there are several lines not because of newline characters but because one line overflows to the next line?</span> – <a href="../../users/4561047/intcreator" title="3,658 reputation" class="comment-user ">intcreator</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment76065563_19525585"><span title="2017-06-14T06:47:45.700 License: CC BY-SA 3.0" class="relativetime-clean">Jun 14 '17 at 06:47</span></a></span> </div> </div> </li> <li id="comment-117740939" class="comment js-comment " data-comment-id="117740939" data-comment-owner-id="2978793" 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="comment117740939_19525585"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@intcreator then use `wrap="off"` property</span> – <a href="../../users/2978793/nikos" title="515 reputation" class="comment-user ">Nikos</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment117740939_19525585"><span title="2021-03-12T17:34:43.267 License: CC BY-SA 4.0" class="relativetime-clean">Mar 12 '21 at 17:34</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="52013377"></a> <div id="answer-52013377" class="answer " data-answerid="52013377" data-ownerid="9144377" data-score="5" 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="52013377"> <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="5">5</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Assuming you know the line-height, the simplest way to do this would be:</p> <pre><code>function numOfLines(textArea, lineHeight) { var h0 = textArea.style.height; ta.style.height = 'auto'; var h1 = textArea.scrollHeight; textArea.style.height = h0; return Math.ceil(h1 / lineHeight); } </code></pre> <p>The trick here is to set the height to <code>auto</code> first. Then when you access scrollHeight the browser will do the layout and return the correct height including any line wraps. Then restore the textarea height to its original value and return the result.</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 Aug 25 '18 at 01:42">answered Aug 25 '18 at 01:42</time> <a href="../../users/9144377/goblin" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/9144377.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="goblin" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/9144377/goblin" class="s-user-card--link">goblin</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">51</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> <li class="s-award-bling s-award-blingbronze" title="1 bronze badges">1</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="54674960"></a> <div id="answer-54674960" class="answer " data-answerid="54674960" data-ownerid="3910932" 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="54674960"> <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"><p>You can get the actual text height from <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight" rel="nofollow noreferrer"><code>Element.scrollHeight</code></a>, but to get the correct height, there has to be a scroll, which means you can temporarily set the text box height to <code>0</code>, until you get the scroll height value then restore back the CSS height.</p> <p>One you have that, you calculate the number of lines based on the CSS line-height property value (1 line of text contributes to <a class="external-link" href="https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle" rel="nofollow noreferrer"><code>getComputedStyle(ref).lineHeight</code></a> pixels), something like...</p> <pre><code>function getTextareaNumberOfLines(textarea) { var previous_height = textarea.style.height, lines textarea.style.height = 0 lines = parseInt( textarea.scrollHeight/parseInt(getComputedStyle(textarea).lineHeight) ) textarea.style.height = previous_height return lines } </code></pre> <p>Note: your elements must be present in the DOM in order to get the scrollHeight, lineHeight heights etc. If not already present, add them, calculate the values, then remove them from the DOM.</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 Feb 13 '19 at 16:24">answered Feb 13 '19 at 16:24</time> <a href="../../users/3910932/ismail" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3910932.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Ismail" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/3910932/ismail" class="s-user-card--link">Ismail</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">662</li> <li class="s-award-bling s-award-blingsilver" title="7 silver badges">7</li> <li class="s-award-bling s-award-bling__bronze" title="22 bronze badges">22</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-54674960" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="54674960" 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-123345350" class="comment js-comment " data-comment-id="123345350" data-comment-owner-id="3910932" 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="comment123345350_54674960"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Make sure `line-height` css property is a numeric value (i.e not `normal` or similar strings)</span> – <a href="../../users/3910932/ismail" title="662 reputation" class="comment-user ">Ismail</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment123345350_54674960"><span title="2021-10-30T17:22:25.330 License: CC BY-SA 4.0" class="relativetime-clean">Oct 30 '21 at 17:22</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="5002972"></a> <div id="answer-5002972" class="answer " data-answerid="5002972" data-ownerid="617661" 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="5002972"> <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"><pre><code> function countLines(area,maxlength) { // var area = document.getElementById("texta") // trim trailing return char if exists var text = area.value.replace(/\s+$/g, "") var split = text.split("\n") if (split.length > maxlength) { split = split.slice(0, maxlength); area.value = split.join('\n'); alert("You can not enter more than "+maxlength.toString()+" lines"); } return false; } </code></pre> <p>this is a simple and tested one</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 Nov 20 '11 at 01:04">edited Nov 20 '11 at 01:04</time> <a href="../../users/246246/animuson" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/246246.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="animuson" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/246246/animuson" class="s-user-card--link">animuson</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">52,378</li> <li class="s-award-bling s-award-blinggold" title="28 gold badges">28</li> <li class="s-award-bling s-award-blingsilver" title="138 silver badges">138</li> <li class="s-award-bling s-award-blingbronze" title="145 bronze badges">145</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 Feb 15 '11 at 11:21">answered Feb 15 '11 at 11:21</time> <a href="../../users/617661/anoop" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/617661.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="anoop" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/617661/anoop" class="s-user-card--link">anoop</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">17</li> <li class="s-award-bling s-award-bling__bronze" title="1 bronze badges">1</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-5002972" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="5002972" 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-15853248" class="comment js-comment " data-comment-id="15853248" data-comment-owner-id="1504966" data-comment-score="3"> <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">3</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment15853248_5002972"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">A newline does not definitively note the break of a line.</span> – <a href="../../users/1504966/austin" title="5,976 reputation" class="comment-user ">Austin</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment15853248_5002972"><span title="2012-08-10T19:19:53.753 License: CC BY-SA 3.0" class="relativetime-clean">Aug 10 '12 at 19:19</span></a></span> </div> </div> </li> <li id="comment-42418551" class="comment js-comment " data-comment-id="42418551" data-comment-owner-id="2012235" data-comment-score="2"> <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">2</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment42418551_5002972"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Sure it does. A break of a line does not definitively signify a newline, however.</span> – <a href="../../users/2012235/dvlsg" title="4,988 reputation" class="comment-user ">dvlsg</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment42418551_5002972"><span title="2014-11-14T19:10:25.317 License: CC BY-SA 3.0" class="relativetime-clean">Nov 14 '14 at 19:10</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="1760661"></a> <div id="answer-1760661" class="answer " data-answerid="1760661" data-ownerid="208479" 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="1760661"> <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 can access the field via Javascript DOM and simply count the number of newline characters.</p> <pre><code>oArea = document.getElementById('myTextField'); var aNewlines = oArea.value.split("\n"); var iNewlineCount = aNewlines.length(); </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 19 '09 at 03:20">answered Nov 19 '09 at 03:20</time> <a href="../../users/208479/webguydan" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/208479.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="webguydan" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/208479/webguydan" class="s-user-card--link">webguydan</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">400</li> <li class="s-award-bling s-award-blingsilver" title="2 silver badges">2</li> <li class="s-award-bling s-award-blingbronze" title="10 bronze badges">10</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-1760661" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="1760661" 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-1644347" class="comment js-comment " data-comment-id="1644347" data-comment-owner-id="67945" data-comment-score="4"> <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">4</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment1644347_1760661"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">This will only work for <enter>. If the text auto-wraps the only way to do it is to use a fixed-size font, count all chars and then divide them by the allowed chars in a row. And that assuming there are no newlines in the process... \n anyone?!</enter></span> – <a href="../../users/67945/frankie" title="24,009 reputation" class="comment-user ">Frankie</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment1644347_1760661"><span title="2009-11-19T03:25:42.693 License: CC BY-SA 2.5" class="relativetime-clean">Nov 19 '09 at 03:25</span></a></span> </div> </div> </li> <li id="comment-1644392" class="comment js-comment " data-comment-id="1644392" data-comment-owner-id="100444" 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="comment1644392_1760661"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">You could turn wrapping off if that is an option which would make the number of newlines = number of rows</span> – <a href="../../users/100444/john-scipione" title="2,280 reputation" class="comment-user ">John Scipione</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment1644392_1760661"><span title="2009-11-19T03:36:32.953 License: CC BY-SA 2.5" class="relativetime-clean">Nov 19 '09 at 03:36</span></a></span> </div> </div> </li> <li id="comment-1644396" class="comment js-comment " data-comment-id="1644396" data-comment-owner-id="67945" 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="comment1644396_1760661"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Mask look into thephpdeveloper answer. It's a more elegant approach than mine.</span> – <a href="../../users/67945/frankie" title="24,009 reputation" class="comment-user ">Frankie</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment1644396_1760661"><span title="2009-11-19T03:37:21.267 License: CC BY-SA 2.5" class="relativetime-clean">Nov 19 '09 at 03:37</span></a></span> </div> </div> </li> <li id="comment-1644418" class="comment js-comment " data-comment-id="1644418" data-comment-owner-id="179364" 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="comment1644418_1760661"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">@Frankie ,but I don't understand his approach,how is it supposed to calculate the rows?</span> – <a href="../../users/179364/mask" title="31,463 reputation" class="comment-user owner">Mask</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/1760629/how-to-get-number-of-rows-in-textarea-using-javascript#comment1644418_1760661"><span title="2009-11-19T03:42:48.870 License: CC BY-SA 2.5" class="relativetime-clean">Nov 19 '09 at 03:42</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="60311659"></a> <div id="answer-60311659" class="answer " data-answerid="60311659" data-ownerid="11692511" 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="60311659"> <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>The simple way:</p> <pre><code>var lines = document.querySelector("textarea").value.split(/\r\n|\r|\n/).length; </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 Feb 20 '20 at 01:25">answered Feb 20 '20 at 01:25</time> <a href="../../users/11692511/null" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/11692511.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Null" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/11692511/null" class="s-user-card--link">Null</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">119</li> <li class="s-award-bling s-award-bling__bronze" title="3 bronze badges">3</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">3</div></a> <a href="../../questions/28905965/textarea-how-to-count-wrapped-lines-rows" class="question-hyperlink">textarea - how to count wrapped lines/rows</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">40</div></a> <a href="../../questions/2035910/how-to-get-the-number-of-lines-in-a-textarea" class="question-hyperlink">How to get the number of lines in a textarea?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">1</div></a> <a href="../../questions/32481484/defining-the-number-of-lines-in-a-text-wrap-as-a-variable" class="question-hyperlink">Defining the number of lines in a text wrap as a variable</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">4</div></a> <a href="../../questions/36710223/how-to-detect-new-row-in-textarea-while-typing-without-setting-line-height-usi" class="question-hyperlink">How to detect new row in textarea while typing without setting Line height using JQuery?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/43822683/replicate-textarea-animation-functionality" class="question-hyperlink">Replicate textarea animation functionality</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">3</div></a> <a href="../../questions/52712760/get-how-many-lines-a-textarea-has" class="question-hyperlink">Get how many lines a textarea has</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/64544017/accessing-the-number-of-lines-of-a-text-string-react-js-application" class="question-hyperlink">Accessing the number of lines of a text string, react js application</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">6</div></a> <a href="../../questions/66486207/how-to-vertically-navigate-through-a-textarea-using-caret-position" class="question-hyperlink">How to vertically navigate through a textarea using caret position</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">2</div></a> <a href="../../questions/7519337/given-a-textarea-is-there-a-way-to-restrict-length-based-on-of-lines" class="question-hyperlink">Given a textarea, is there a way to restrict length based on # of lines?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">0</div></a> <a href="../../questions/10987185/textarea-that-automatically-adjusts-its-own-font-size-according-to-content-its" class="question-hyperlink">Textarea that automatically adjusts its own font-size according to content & its length</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">0</div></a> <a href="../../questions/13071278/gwt-count-the-number-of-rows-in-a-div" class="question-hyperlink">GWT count the number of rows in a div</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">9</div></a> <a href="../../questions/13519411/count-number-of-lines-displayed-not-newlines-in-an-html-textarea-without-jquer" class="question-hyperlink">Count number of lines displayed (not newlines) in an HTML textarea without jQuery?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes default">0</div></a> <a href="../../questions/14851714/jquery-change-textarea-styles-when-user-starts-fourth-line" class="question-hyperlink">Jquery change textarea styles when user starts fourth line</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/61811359/any-way-to-access-specific-rows-of-text-within-an-html-textarea-using-javascri" class="question-hyperlink">Any way to access specific rows of text within an HTML textarea using JavaScript?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">9</div></a> <a href="../../questions/13519411/count-number-of-lines-displayed-not-newlines-in-an-html-textarea-without-jquer" class="question-hyperlink">Count number of lines displayed (not newlines) in an HTML textarea without jQuery?</a> </div> </div> <div class="linked"> <div class="spacer"> <a title="Vote score (upvotes - downvotes)"><div class="answer-votes answered-accepted default">0</div></a> <a href="../../questions/13071278/gwt-count-the-number-of-rows-in-a-div" class="question-hyperlink">GWT count the number of rows in a div</a> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script> /* replace <time class="fromnow" /> with human delta between `datetime` attr and now */ document.addEventListener('DOMContentLoaded', function(){ var time_elements = document.querySelectorAll("time.fromnow"); for (var i=0; i<time_elements.length; i++) { time_elements[i].innerHTML = moment(time_elements[i].getAttribute("datetime")).fromNow(); } }); </script> </body> </html>