javascript 计算没有 jQuery 的 HTML 文本区域中显示的行数（不是换行符）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13519411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Count number of lines displayed (not newlines) in an HTML textarea without jQuery?
提问by NazKazi
Possible Duplicate:
How to get number of rows in <textarea >?
可能的重复：
如何获取 <textarea > 中的行数？
I have a textareaand I write 7 linesin it with only 2 new line characterlike below, just imagine the following code box is a textareaand only twice the enter key is pressed.
我有一个textarea，我只写7 lines了2 new line character下面的内容，想象一下下面的代码框是一个，textarea并且只按下了两次回车键。
A text box, text field or text entry box is a kind of widget used when building
a graphical user interface (GUI). A text box purpose is to allow the user to
input text information to be used by the program.
User-interface guidelines recommend a single-line text box when only one line of
input is required, and a multi-line text box only if more than one line of input
may be required.
Non-editable text boxes can serve the purpose of simply displaying text.
After writing some more lines if now the textarea line countis n. How can I calculate the value of n?
如果现在textarea line count是n. 如何计算 的值n？
Please be clear before you answer the question. I don't want to count how many new line charactersare there in my text like this one. How to get the number of lines in a textarea?
回答问题前请说清楚。我不想像这样计算new line characters我的文本中有多少。如何获取textarea中的行数？
I want to count the number of lines as like as Microsoft Wordcount it from a passage.
我想像Microsoft Word从段落中计算行数一样计算行数。
no jQuery please...
请不要使用jQuery...
采纳答案by Ace
you could try out this. i didn't test it so far, but i remember this should work fine.
你可以试试这个。到目前为止我还没有测试过，但我记得这应该可以正常工作。
var lineHeight = document.getElementById("yourTextarea").style.lineHeight;
var scrollHeight = document.getElementById("yourTextarea").scrollHeight;
document.getElementById("yourTextarea").style.height = scrollHeight; // this is just for showing purposes
var numLines = Math.floor( scrollHeight / lineHeight );
this should be the easyest way i think.
这应该是我认为最简单的方法。
EDIT
编辑
so here is the answer, as simple as it is :D
所以这就是答案，就这么简单：D
first make shure to give the textarea a value for cols
首先让舒尔给 textarea 一个cols的值
and now check this out =
现在检查一下=
<textarea id="mytext" cols="10" rows="12">
</textarea>
<input type="button" value="Count Rows" onclick="countRows();"/>
<script type="text/javascript">
function countRows() {
var stringLength = document.getElementById("mytext").value.length;
var count = Math.ceil( stringLength / document.getElementById("mytext").cols );
// just devide the absolute string length by the amount of horizontal place and ceil it
alert( count );
}
</script>
now this should work just as it should.
现在这应该像它应该的那样工作。
UPDATE
更新
you also can make sure to remove all "new line" elements or just the last character IF it IS a "new line" in the string befor getting the length. this way there will no unwanted additional lines counted.
您还可以确保在获取长度之前删除所有“新行”元素或仅删除最后一个字符，如果它是字符串中的“新行”。这样就不会计算不需要的额外行。
ALSO be sure to NOT set the "width" of the textbox !! this will cause the text in a row to go further then the value of "cols". that way the "count" value will give you the count of rows if would be with a max-row-width of cols value. so the only way to set the width of the textbox with the cols attribute.
还要确保不要设置文本框的“宽度”！！这将导致一行中的文本比“cols”的值更进一步。这样，“计数”值将为您提供行数，如果最大行宽度为 cols 值。所以使用 cols 属性设置文本框宽度的唯一方法。
UPDATE 2
更新 2
i think if you want a non buggy way there is no way around using PHP or jQuery.
我想如果你想要一种非错误的方式，就没有办法使用 PHP 或 jQuery。
also the second solution is just a quick and dirty way. you'd have to code a logic that checks each word if it is longer then the awaylable width and also check each row for words that have been put to the next row because of insufficient space.
第二种解决方案也只是一种快速而肮脏的方式。您必须编写一个逻辑来检查每个单词是否比可移除的宽度长，并且还要检查每一行中是否有由于空间不足而被放到下一行的单词。
this will require some logical skills and due to inactivity i will not write the code for now.
这将需要一些逻辑技能，由于不活动，我现在不会编写代码。
if you want me do post a complete Javascript, PHP or jQuery solution, please let me know. ( i don't see any reason why to not use jQuery for this )
如果您希望我发布完整的 Javascript、PHP 或 jQuery 解决方案，请告诉我。（我看不出有什么理由不为此使用 jQuery）
