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

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...

Dorey

What have you tried? (The purpose of StackOverflow is to help you solve problems, not to do your assignment for you. You should at least make an attempt to solve the problem on your own.) – Carboxylase

@Carboxylase I search in google with many keywords... but found no way from where to start... and about codes nothing works for me... – Dorey

Isn't the most upvoted answer to this question just what you want ? – Orangeism

@dystroy I want to count line numbers not new line chars... – Dorey

@Carboxylase This doesn't seem to be such a trivial question. Without any idea, it's hard to start. – Orangeism

@BlackCobra Have another look at the answer, it doesn't involve counting newlines – Inerrable

@BlackCobra the answer I link to doesn't count the new line chars, it uses the scroll height. – Orangeism

@dystroy & @Asad I already tried to count the line number using the scrollHeight... but the empty textarea comes with 12 rows... though if I write 7 lines, it will return me 12... – Dorey

@BlackCobra Try searching for articles on automatically sizing the height of a textarea. If you can calculate the size needed, then you'd be able to use the solution from Ace. – Carboxylase

Friends... why this question is closed...?? read my question and the comments... anyone will understand that my question is unique... not duplicate... by the by why will I post a duplicate question...?? – Dorey

Don't remove auto-inserted text. It's there for a reason, even if you don't agree with it. You can flag to reopen if you think it should be. – Costplus

do you want to use php ?? is not it's also ok, i will post my answer as you callback – Lamori

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 )

Lamori

my empty textarea comes with 12 rows... so when I will write 7 lines, it will return me 12... – Dorey

i've found another way , i'm just testing it right now – Lamori

sorry to inform you a bug in your code... please check this link... you code doesn't work with passage... don't forget to click the run button (left bottom corner) before click count rows from the result box... – Dorey

see my updated code, i've just erased the -1, but also i think my code is not counting the spaces, i'll update it soon.. – Lamori

allright , i now why this happeny, let me think about it for a moment. i am hardly interested to solve this ! :D – Lamori

let us know if you find a solution. curently i'm trying to replace spaces and newlines and spliting words that have more that <cols> number of characters... still trying – Lamori

also you could tell us what are you trying to do with the absolute count of the rows... maybe there is a way around this... – Lamori

Please don't add signatures and other needless commentary to the end of posts. – Costplus