Reading newlines in textarea BEFORE submitting the form?

Question

I have textarea with the wrap = "hard" attribute, that is, I should be able to get a line break (new lines) after sending to the server - this works. But I want to do to get new lines created before sending.

Why? Because I want to count the lines that are currently visible. And now I'm not talking about carriage return lines. I am talking about strings that are created by restricting the width (or setting the cols attribute) of a text field.

I have this text box:

<textarea id="myarea" name="myarea" cols="35" rows="10" wrap="hard"> Some example text here. Hello my name is something I should be able to blabla. </textarea> 

Output in browser:
Here is a sample text here. Hello my Name Is
something I must be able to blab.

rows = 2

I tried:
$ ('# Myarea'). HTML (). Schism ("\ n"). Length
$ ('# Myarea') Shaft () Split ("<w>") ... Length
$ ('# Myarea'). Shaft(). Split ("\ g"). Length
And a few more combinations ...

But no one is working. Is what I ask even possible without writing a script that counts each character and then creates a new line? I was hoping this would happen "automatically" ...

If this is not possible, why can the server interpret (find) newlines, but I can’t?

Thanks!

Answer 1

There seems to be no built-in tools to get this value. But we can calculate it. Suppose the line height in textarea is a known value (you can explicitly define it in css). Thus, the code for calculating the number of lines will look like this:

  var area = $('#myarea').get(0); //save the initial height of textarea var initialHeight = area.style.height; //set the height to 0 so scrollHeight will always return dynamic height area.style.height = '0px'; //here we assume that the line-height equals to 15 var numberOfRows = Math.floor(area.scrollHeight / 15); //restore textarea height area.style.height = initialHeight; console.log(numberOfRows); 

Working example http://jsfiddle.net/J5UpF/

UPDATE

Just calculated the error in Chrome with my code. I did not take into account the scroll bar that appears on the right side of the text box. This results in the wrong number of lines computed sometimes. However, it works like a charm in Firefox. To fix this problem, we need to calculate the difference in the width of the scrollbar and adjust the width of the textarea accordingly:

 var area = $('#myarea').get(0); var $area = $('#myarea'); //save the initial height of textarea var initialHeight = area.style.height; var scrollbarWidthInitial = area.offsetWidth - area.clientWidth; //set the height to 0 so scrollHeight will always return dynamic height area.style.height = '0px'; var scrollbarWidth = area.offsetWidth - area.clientWidth; var scrollbarWidthDiff = scrollbarWidth - scrollbarWidthInitial; $area.width($area.width() + scrollbarWidthDiff); //here we assume that the line-height equals to 15 var numberOfRows = Math.floor(area.scrollHeight / 15); //restore textarea height area.style.height = initialHeight; $area.width($area.width() - scrollbarWidthDiff); console.log(numberOfRows); 

updated example http://jsfiddle.net/J5UpF/3/

UPDATE 2

New terrific bug found in Chrome! When using the placeholder attribute, Chrome calculates the number of lines for the placeholder text. The workaround is simple: just back up the placeholder attribute when you entered some data in textarea and restore it when the data is cleared.

Updated example http://jsfiddle.net/J5UpF/4/

Answer 2

You can link jquery to the onClick submit button, then using

 $('#myarea').val().split("\n").length