Question

175

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

rated 0 times [ 178] [ 3] / answers: 1 / hits: 16741 / 12 Years ago, thu, november 22, 2012, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tammyb

Add To Favorites

Follow

Total Points: 278

Total Questions: 101

Total Answers: 103

Location: Botswana

Member since Sat, Jan 7, 2023

1 Year ago

answered 12 Years ago micayla · Accepted Answer

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 )