如何获取<textarea>中的行数使用 JavaScript? [英] How to get number of rows in <textarea > using JavaScript?

问题描述

我有一个 </code> 元素.我可以使用 JavaScript 检测其中有(例如)10 行文本吗?<em class="showen"></em></p> <p class="en">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> <h3 class="best_ans mt-1">推荐答案</h3> <p class="cn">好吧，我找到了一种更简单的方法来做到这一点，但您需要在 CSS 中设置 textarea 的行高.我试图读取脚本 <code>ta.style.lineHeight</code> 中的行高，但它似乎没有返回值.<em class="showen"></em></p> <p class="en">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 class="cn">CSS</p> <pre><code><code>#ta { width: 300px; line-height: 20px; } </code></code></pre> <p class="cn">HTML</p> <pre><code><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></code></pre> <p class="cn">脚本</p> <pre><code><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></code></pre> <p class="cn"><小时><p>更新:感谢@Pebbl 解决了错误，这是获取文本内容高度所需的代码 (<a href="http://jsfiddle.net/Mottie/PfD7L/100/" rel="noreferrer">演示</a>)</p> <pre><code><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></code></pre> <p>这篇关于如何获取&lt;textarea&gt;中的行数使用 JavaScript?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2643566');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="如何获取&lt; textarea&gt;中的行数使用JavaScript？" href="/860935.html"> 如何获取&lt; textarea&gt;中的行数使用JavaScript？; </a> </li> <li> <a target="_blank" title="获取&lt; TextArea&gt;文本" href="/1070298.html"> 获取&lt; TextArea&gt;文本; </a> </li> <li> <a target="_blank" title="&lt; textarea&gt;询问" href="/1347149.html"> &lt; textarea&gt;询问; </a> </li> <li> <a target="_blank" title="如何更改&lt; textarea&gt;的内容用Javascript" href="/1003738.html"> 如何更改&lt; textarea&gt;的内容用Javascript; </a> </li> <li> <a target="_blank" title="中（竖直）对齐&lt; textarea&gt;" href="/573276.html"> 中（竖直）对齐&lt; textarea&gt;; </a> </li> <li> <a target="_blank" title="从&lt; textarea&gt;填充数组在JavaScript中" href="/2271838.html"> 从&lt; textarea&gt;填充数组在JavaScript中; </a> </li> <li> <a target="_blank" title="找到&lt; textarea&gt;的当前行的值使用javascript" href="/1014149.html"> 找到&lt; textarea&gt;的当前行的值使用javascript; </a> </li> <li> <a target="_blank" title="验证&lt; textarea&gt;用jQuery" href="/1485160.html"> 验证&lt; textarea&gt;用jQuery; </a> </li> <li> <a target="_blank" title="&lt; textarea&gt;与水平规则" href="/581434.html"> &lt; textarea&gt;与水平规则; </a> </li> <li> <a target="_blank" title="&lt; textarea&gt;与水平规则" href="/563760.html"> &lt; textarea&gt;与水平规则; </a> </li> <li> <a target="_blank" title="&lt; textarea&gt;将formControlName添加到&lt; textarea&gt;时，默认内容消失.元素" href="/1925529.html"> &lt; textarea&gt;将formControlName添加到&lt; textarea&gt;时，默认内容消失.元素; </a> </li> <li> <a target="_blank" title="HTML的最大长度&lt; textarea&gt;" href="/557213.html"> HTML的最大长度&lt; textarea&gt;; </a> </li> <li> <a target="_blank" title="HTML / JavaScript：如何制作&lt; textarea&gt;的默认文字不可删除？" href="/864174.html"> HTML / JavaScript：如何制作&lt; textarea&gt;的默认文字不可删除？; </a> </li> <li> <a target="_blank" title="&lt; textarea&gt;中的行；链接到JQuery" href="/1492553.html"> &lt; textarea&gt;中的行；链接到JQuery; </a> </li> <li> <a target="_blank" title="为什么不是&lt; textarea&gt;自闭？" href="/870360.html"> 为什么不是&lt; textarea&gt;自闭？; </a> </li> <li> <a target="_blank" title="建立&lt; textarea&gt;填充剩余高度" href="/576058.html"> 建立&lt; textarea&gt;填充剩余高度; </a> </li> <li> <a target="_blank" title="TinyMCE的＆LT; TextArea＆GT;双向绑定AngularJS" href="/197706.html"> TinyMCE的＆LT; TextArea＆GT;双向绑定AngularJS; </a> </li> <li> <a target="_blank" title="为什么&lt; textarea&gt;显示&lt;&gt;而不是&amp;" href="/679778.html"> 为什么&lt; textarea&gt;显示&lt;&gt;而不是&amp;; </a> </li> <li> <a target="_blank" title="如何将文本附加到“&lt;textarea&gt;"?" href="/2757151.html"> 如何将文本附加到“&lt;textarea&gt;"?; </a> </li> <li> <a target="_blank" title="如何将文字附加到'&lt; textarea&gt;'？" href="/890077.html"> 如何将文字附加到'&lt; textarea&gt;'？; </a> </li> <li> <a target="_blank" title="javascript - &lt;textarea&gt; 标签内存在换行符问题" href="/723567.html"> javascript - &lt;textarea&gt; 标签内存在换行符问题; </a> </li> <li> <a target="_blank" title="Javascript 将密钥代码发送到 &lt;textarea&gt;元素" href="/2820879.html"> Javascript 将密钥代码发送到 &lt;textarea&gt;元素; </a> </li> <li> <a target="_blank" title="如何禁用&lt;textarea&gt;的调整大小抓取器?" href="/2643623.html"> 如何禁用&lt;textarea&gt;的调整大小抓取器?; </a> </li> <li> <a target="_blank" title="如何禁用&lt; textarea&gt;的调整大小抓取器?" href="/1859773.html"> 如何禁用&lt; textarea&gt;的调整大小抓取器?; </a> </li> <li> <a target="_blank" title="从&lt; textarea&gt用fb.ui？" href="/748596.html"> 从&lt; textarea&gt用fb.ui？; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>前端开发最新文章</h5> <ul> <li> <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html"> 为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？; </a> </li> <li> <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html"> 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接; </a> </li> <li> <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html"> 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？; </a> </li> <li> <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html"> 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？; </a> </li> <li> <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html"> 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件; </a> </li> <li> <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html"> 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？; </a> </li> <li> <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html"> 此请求已被阻止;内容必须通过HTTPS提供; </a> </li> <li> <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html"> 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）; </a> </li> <li> <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html"> 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点; </a> </li> <li> <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html"> 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = '如何,获取,lt,textarea&gt,中,的,行数,使用,javascript'; var cat = 'cc';';//qianduan</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接： <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section> <!--统计代码--> <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>