CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Whyser
Whyser

Reputation: 2247

Read new-lines in textarea BEFORE submitting form?

I have an textarea with attribute wrap="hard", meaning I should be able to get the line break (new lines) after submit to server - this works. But what I wanna do is get the new lines that are created before submission.

Why? Because I wanna count the rows that are currently visible. And now I'm NOT talking about carriage return rows. I'm talking about rows that are created by limiting the width (or setting the cols attribute) of the textarea.

I have this textbox:

<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:
Some example text here. Hello my name is
something I should be able to blabla.

rows = 2

I've tried:
$('#myarea').html().split("\n").length
$('#myarea').val().split("< br>").length
$('#myarea').val().split("\r").length
And a few more combinations...

But none works. Is what I'm asking even possible without writing a script that counts each character and then creates a newline? I was hoping this would happend "automatically"...

If this is not possible, why can the server interpret (find) the new lines, while I can not?

Thanks!

Upvotes: 6

Views: 1137

Answers (2)

claustrofob
claustrofob

Reputation: 4984

Seems like there is no build in tools to get this value. But we can calculate it. Assume that the line-height in textarea is a known value (you can explicitly define it in css). So the code to calculate the number of rows would 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 figured out the bug in Chrome with my code. I didn't take into account the scrollbar that appears on the right side of textarea. That leads to the wrong number of lines calculated sometimes. However it works like a charm in Firefox. To fix this issue we have to calculate the difference of scrollbars width and adjust the width of 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

A new awesome bug in Chrome is discovered! When using placeholder attribute Chrome calculates the number of rows for placeholder text. The workaround is simple: just backup the placeholder attribute when you entered some data into textarea and restore it when data is cleared.

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

Upvotes: 2

Perry
Perry

Reputation: 98

You could bind jquery on the submit button onClick, then using 

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

Upvotes: -1

Related Questions