Count number of lines displayed (not newlines) in an HTML textarea without jQuery?

Question

Possible Duplicate:
How to get number of rows in <textarea >?

I have a textarea and I write 7 lines in it with only 2 new line character like below, just imagine the following code box is a textarea and only twice the enter key is pressed.

 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 count is n. How can I calculate the value of n?

Please be clear before you answer the question. I don't want to count how many new line characters are there in my text like this one. How to get the number of lines in a textarea?

I want to count the number of lines as like as Microsoft Word count it from a passage.

no jQuery please...

Answer 1

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

first make shure to give the textarea a value for 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.

UPDATE 2

i think if you want a non buggy way there is no way around using PHP or 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 )