How to get the number of lines in a textarea?
up vote
25
down vote
favorite
What I would like is to count the number of lines in a textarea, e.g:
line 1
line 2
line 3
line 4
should count up to 4 lines. Basically pressing enter once would transfer you to the next line
The following code isn't working:
var text = $("#myTextArea").val();
var lines = text.split("r");
var count = lines.length;
console.log(count);
It always gives '1' no matter how many lines.
javascript jquery
asked Jan 10 '10 at 2:53
Click Upvote
95.4k222509688
add a comment |
up vote
25
down vote
favorite
What I would like is to count the number of lines in a textarea, e.g:
line 1
line 2
line 3
line 4
should count up to 4 lines. Basically pressing enter once would transfer you to the next line
The following code isn't working:
var text = $("#myTextArea").val();
var lines = text.split("r");
var count = lines.length;
console.log(count);
It always gives '1' no matter how many lines.
javascript jquery
asked Jan 10 '10 at 2:53
Click Upvote
95.4k222509688
add a comment |
up vote
25
down vote
favorite
up vote
25
down vote
favorite
What I would like is to count the number of lines in a textarea, e.g:
line 1
line 2
line 3
line 4
should count up to 4 lines. Basically pressing enter once would transfer you to the next line
The following code isn't working:
var text = $("#myTextArea").val();
var lines = text.split("r");
var count = lines.length;
console.log(count);
It always gives '1' no matter how many lines.
javascript jquery
asked Jan 10 '10 at 2:53
Click Upvote
95.4k222509688
What I would like is to count the number of lines in a textarea, e.g:
line 1
line 2
line 3
line 4
should count up to 4 lines. Basically pressing enter once would transfer you to the next line
The following code isn't working:
var text = $("#myTextArea").val();
var lines = text.split("r");
var count = lines.length;
console.log(count);
It always gives '1' no matter how many lines.
javascript jquery
javascript jquery
asked Jan 10 '10 at 2:53
Click Upvote
95.4k222509688
asked Jan 10 '10 at 2:53
Click Upvote
95.4k222509688
asked Jan 10 '10 at 2:53
Click Upvote
95.4k222509688
asked Jan 10 '10 at 2:53
Click Upvote
95.4k222509688
asked Jan 10 '10 at 2:53
Click Upvote
95.4k222509688
95.4k222509688
add a comment |
add a comment |
11 Answers
11
active
oldest
votes
up vote
17
down vote
accepted
I have implemented the lines and lineCount methods as String prototypes:
String.prototype.lines = function() { return this.split(/r*n/); }
String.prototype.lineCount = function() { return this.lines().length; }
Apparently the split method will not count a carriage return and/or newline character at the end of the string (or the innerText property of a textarea) in IE9, but it will count it in Chrome 22, yielding different results.
So far I have accomodated for this by subtracting 1 from the line count when the browser is other than Internet Explorer:
String.prototype.lineCount = function() { return this.lines().length - navigator.userAgent.indexOf("MSIE") != -1); }
Hopefully someone has a better RegExp or another workaround.
answered Oct 17 '12 at 5:08
thor2k
514513
After further testing, I discovered that any whitespace after the last newline character and before the closing tag also counts as an extra element in the split -in other than IE9 browsers.
– thor2k
Oct 27 '12 at 13:28
this post is a little old, but just for info, I think I found a workaround: the use of acontenteditableelement instead of a textarea: http://stackoverflow.com/a/22732344/2037924...
– webeno
Mar 30 '14 at 21:48
It work when I press enter, but it doesn't work for long text appearing in few lines.
– RaV
Sep 1 '16 at 11:31
How are you adding the text? When are you trying to get the count? Make sure to trigger the count after adding the initial text... How long is the text? There's no particular limit, but 64K is theorized as the limit. Also, make sure the maxLength attribute is not defined on your text area. Finally, this is pure JavaScript working on any JavaScript string, it just so happens that the OP wanted to apply to the text area's value (a JavaScript string).
– thor2k
Sep 1 '16 at 15:03
add a comment |
up vote
41
down vote
The problem with using "n" or "r" is it only counts the number of returns, if you have a line that is long it could wrap and then it wouldn't be counted as a new line. This is an alternative way to get the number of lines - so it may not be the best way.
Edit (thanks alex):
Script
$(document).ready(function(){
var lht = parseInt($('textarea').css('lineHeight'),10);
var lines = $('textarea').attr('scrollHeight') / lht;
console.log(lines);
})
Update: There is a much more thorough answer here: https://stackoverflow.com/a/1761203/145346
edited May 23 '17 at 12:26
Community♦
11
answered Jan 10 '10 at 7:32
Mottie
55k18105204
2
you could lessen maintenance with `var lineheight = $('textarea#my-textarea').css('line-height');
– alex
Jan 10 '10 at 8:53
1
That doesn't seem to return the correct line height, you have to set it.
– Mottie
Jan 10 '10 at 16:09
4
I think you need to replaceattrwithprop, at leastattrdidn't work for me, it returned undefined every time...
– webeno
Mar 30 '14 at 21:30
4
@webeno it depends on the version of jQuery that you use. As of jQuery v1.6, you need to useprop()instead ofattr()(ref)
– Mottie
Mar 31 '14 at 12:14
6
This example doesn't take padding in consideration. When adding padding, I get the correct number:var padding = parseInt($('textarea').css('paddingTop'),10) + parseInt($('textarea').css('paddingBottom'),10) var lines = ($('textarea').prop('scrollHeight') - padding) / lineheight;
– dnlmzw
Jan 2 '15 at 13:13
|
show 4 more comments
up vote
23
down vote
If you are just wanting to test hard line returns, this will work cross platform:
var text = $("#myTextArea").val();
var lines = text.split(/r|rn|n/);
var count = lines.length;
console.log(count); // Outputs 4
answered Jan 10 '10 at 2:58
Doug Neiner
55.1k1198114
add a comment |
up vote
8
down vote
user n instead of r
var text = $("#myTextArea").val();
var lines = text.split("n");
var count = lines.length;
console.log(count);
answered Jan 10 '10 at 2:56
Marek Karbarz
24.5k64572
add a comment |
up vote
2
down vote
What about splitting on "n" instead?
It will also be a problem where one line wrapped to 2 lines in the textarea.
To do it accurately like this, you could use a fixed height font and measure pixels. This could be problematic though.
answered Jan 10 '10 at 2:54
alex
335k166761910
2
ouch...................!
– alex
Jan 10 '10 at 3:04
It's not that bad... I used this method in my answer.
– Mottie
Jan 10 '10 at 7:35
add a comment |
up vote
2
down vote
This function counts the number of lines which have text in a textarea:
function countLine(element) {
var text = $(element).val();
var lines = text.split("n");
var count = 0;
for (var i = 0; i < lines.length-1; i++) {
if (lines[i].trim()!="" && lines[i].trim()!=null) {
count += 1;
}
}
return count;
}
edited Mar 11 '15 at 11:41
AJPerez
2,21484262
answered Mar 11 '15 at 10:55
Tran Duy
211
add a comment |
up vote
1
down vote
The normal newline character is "n". The convention on some systems is to also have "r" beforehand, so on these systems "rn" is often found to mean a new line. In a browser, unless the user intentionally enters a "r" by copying it from somewhere else, the newline will probably be expressed as just "n". In either case splitting by "n" will count the number of lines.
answered Jan 10 '10 at 2:58
Danny Roberts
2,3801726
add a comment |
up vote
1
down vote
I've used the original answer of Mottie but some functions were changed in the JQuery API. Here is the working function for the current API v3.1.0:
var lht = parseInt($('#textarea').css('lineHeight'),10);
var lines = $('#textarea').prop('scrollHeight') / lht;
console.log(lines);
All tumbs up for Mottie's answer!
answered Aug 11 '16 at 13:26
Quispie
6201123
add a comment |
up vote
1
down vote
However this is working if you need use it because it respond to your problem
let text = document.getElementById("myTextarea").value;
let lines = text.split(/r|rn|n/);
let count = lines.length;
console.log(count);
answered May 15 '17 at 13:14
Ir Calif
14416
add a comment |
up vote
0
down vote
<html>
<head>
<script>
function countLines(theArea){
var theLines = theArea.value.replace((new RegExp(".{"+theArea.cols+"}","g")),"n").split("n");
if(theLines[theLines.length-1]=="") theLines.length--;
theArea.form.lineCount.value = theLines.length;
}
</script>
</head>
<body>
<form>
<textarea name="myText" onKeyUp="countLines(this)" cols="10" rows="10">
</textarea>
<br>
Lines:
<input type=text name="lineCount" size="2" value="0">
</form>
</body>
</html>
answered May 3 '14 at 18:00
humo
84
add a comment |
up vote
0
down vote
Your ans can be done in very simple way.
var text = $("#myTextArea").val();
// will remove the blank lines from the text-area
text = text.replace(/^s*[rn]/gm, "");
//It will split when new lines enter
var lines = text.split(/r|rn|n/);
var count = lines.length; //now you can count thses lines.
console.log(count);
This code for exact lines filled in the textarea.
and will work for sure.
answered Sep 21 '17 at 6:08
Bachas
6119
add a comment |
11 Answers
11
active
oldest
votes
11 Answers
11
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
17
down vote
accepted
I have implemented the lines and lineCount methods as String prototypes:
String.prototype.lines = function() { return this.split(/r*n/); }
String.prototype.lineCount = function() { return this.lines().length; }
Apparently the split method will not count a carriage return and/or newline character at the end of the string (or the innerText property of a textarea) in IE9, but it will count it in Chrome 22, yielding different results.
So far I have accomodated for this by subtracting 1 from the line count when the browser is other than Internet Explorer:
String.prototype.lineCount = function() { return this.lines().length - navigator.userAgent.indexOf("MSIE") != -1); }
Hopefully someone has a better RegExp or another workaround.
answered Oct 17 '12 at 5:08
thor2k
514513
After further testing, I discovered that any whitespace after the last newline character and before the closing tag also counts as an extra element in the split -in other than IE9 browsers.
– thor2k
Oct 27 '12 at 13:28
this post is a little old, but just for info, I think I found a workaround: the use of acontenteditableelement instead of a textarea: http://stackoverflow.com/a/22732344/2037924...
– webeno
Mar 30 '14 at 21:48
It work when I press enter, but it doesn't work for long text appearing in few lines.
– RaV
Sep 1 '16 at 11:31
How are you adding the text? When are you trying to get the count? Make sure to trigger the count after adding the initial text... How long is the text? There's no particular limit, but 64K is theorized as the limit. Also, make sure the maxLength attribute is not defined on your text area. Finally, this is pure JavaScript working on any JavaScript string, it just so happens that the OP wanted to apply to the text area's value (a JavaScript string).
– thor2k
Sep 1 '16 at 15:03
add a comment |
up vote
17
down vote
accepted
I have implemented the lines and lineCount methods as String prototypes:
String.prototype.lines = function() { return this.split(/r*n/); }
String.prototype.lineCount = function() { return this.lines().length; }
Apparently the split method will not count a carriage return and/or newline character at the end of the string (or the innerText property of a textarea) in IE9, but it will count it in Chrome 22, yielding different results.
So far I have accomodated for this by subtracting 1 from the line count when the browser is other than Internet Explorer:
String.prototype.lineCount = function() { return this.lines().length - navigator.userAgent.indexOf("MSIE") != -1); }
Hopefully someone has a better RegExp or another workaround.
answered Oct 17 '12 at 5:08
thor2k
514513
After further testing, I discovered that any whitespace after the last newline character and before the closing tag also counts as an extra element in the split -in other than IE9 browsers.
– thor2k
Oct 27 '12 at 13:28
this post is a little old, but just for info, I think I found a workaround: the use of acontenteditableelement instead of a textarea: http://stackoverflow.com/a/22732344/2037924...
– webeno
Mar 30 '14 at 21:48
It work when I press enter, but it doesn't work for long text appearing in few lines.
– RaV
Sep 1 '16 at 11:31
How are you adding the text? When are you trying to get the count? Make sure to trigger the count after adding the initial text... How long is the text? There's no particular limit, but 64K is theorized as the limit. Also, make sure the maxLength attribute is not defined on your text area. Finally, this is pure JavaScript working on any JavaScript string, it just so happens that the OP wanted to apply to the text area's value (a JavaScript string).
– thor2k
Sep 1 '16 at 15:03
add a comment |
up vote
17
down vote
accepted
up vote
17
down vote
accepted
I have implemented the lines and lineCount methods as String prototypes:
String.prototype.lines = function() { return this.split(/r*n/); }
String.prototype.lineCount = function() { return this.lines().length; }
Apparently the split method will not count a carriage return and/or newline character at the end of the string (or the innerText property of a textarea) in IE9, but it will count it in Chrome 22, yielding different results.
So far I have accomodated for this by subtracting 1 from the line count when the browser is other than Internet Explorer:
String.prototype.lineCount = function() { return this.lines().length - navigator.userAgent.indexOf("MSIE") != -1); }
Hopefully someone has a better RegExp or another workaround.
answered Oct 17 '12 at 5:08
thor2k
514513
I have implemented the lines and lineCount methods as String prototypes:
String.prototype.lines = function() { return this.split(/r*n/); }
String.prototype.lineCount = function() { return this.lines().length; }
Apparently the split method will not count a carriage return and/or newline character at the end of the string (or the innerText property of a textarea) in IE9, but it will count it in Chrome 22, yielding different results.
So far I have accomodated for this by subtracting 1 from the line count when the browser is other than Internet Explorer:
String.prototype.lineCount = function() { return this.lines().length - navigator.userAgent.indexOf("MSIE") != -1); }
Hopefully someone has a better RegExp or another workaround.
answered Oct 17 '12 at 5:08
thor2k
514513
answered Oct 17 '12 at 5:08
thor2k
514513
answered Oct 17 '12 at 5:08
thor2k
514513
answered Oct 17 '12 at 5:08
thor2k
514513
514513
After further testing, I discovered that any whitespace after the last newline character and before the closing tag also counts as an extra element in the split -in other than IE9 browsers.
– thor2k
Oct 27 '12 at 13:28
this post is a little old, but just for info, I think I found a workaround: the use of acontenteditableelement instead of a textarea: http://stackoverflow.com/a/22732344/2037924...
– webeno
Mar 30 '14 at 21:48
It work when I press enter, but it doesn't work for long text appearing in few lines.
– RaV
Sep 1 '16 at 11:31
How are you adding the text? When are you trying to get the count? Make sure to trigger the count after adding the initial text... How long is the text? There's no particular limit, but 64K is theorized as the limit. Also, make sure the maxLength attribute is not defined on your text area. Finally, this is pure JavaScript working on any JavaScript string, it just so happens that the OP wanted to apply to the text area's value (a JavaScript string).
– thor2k
Sep 1 '16 at 15:03
add a comment |
After further testing, I discovered that any whitespace after the last newline character and before the closing tag also counts as an extra element in the split -in other than IE9 browsers.
– thor2k
Oct 27 '12 at 13:28
this post is a little old, but just for info, I think I found a workaround: the use of acontenteditableelement instead of a textarea: http://stackoverflow.com/a/22732344/2037924...
– webeno
Mar 30 '14 at 21:48
It work when I press enter, but it doesn't work for long text appearing in few lines.
– RaV
Sep 1 '16 at 11:31
How are you adding the text? When are you trying to get the count? Make sure to trigger the count after adding the initial text... How long is the text? There's no particular limit, but 64K is theorized as the limit. Also, make sure the maxLength attribute is not defined on your text area. Finally, this is pure JavaScript working on any JavaScript string, it just so happens that the OP wanted to apply to the text area's value (a JavaScript string).
– thor2k
Sep 1 '16 at 15:03
After further testing, I discovered that any whitespace after the last newline character and before the closing tag also counts as an extra element in the split -in other than IE9 browsers.
– thor2k
Oct 27 '12 at 13:28
After further testing, I discovered that any whitespace after the last newline character and before the closing tag also counts as an extra element in the split -in other than IE9 browsers.
– thor2k
Oct 27 '12 at 13:28
this post is a little old, but just for info, I think I found a workaround: the use of a
contenteditable element instead of a textarea: http://stackoverflow.com/a/22732344/2037924...– webeno
Mar 30 '14 at 21:48
this post is a little old, but just for info, I think I found a workaround: the use of a
contenteditable element instead of a textarea: http://stackoverflow.com/a/22732344/2037924...– webeno
Mar 30 '14 at 21:48
It work when I press enter, but it doesn't work for long text appearing in few lines.
– RaV
Sep 1 '16 at 11:31
It work when I press enter, but it doesn't work for long text appearing in few lines.
– RaV
Sep 1 '16 at 11:31
How are you adding the text? When are you trying to get the count? Make sure to trigger the count after adding the initial text... How long is the text? There's no particular limit, but 64K is theorized as the limit. Also, make sure the maxLength attribute is not defined on your text area. Finally, this is pure JavaScript working on any JavaScript string, it just so happens that the OP wanted to apply to the text area's value (a JavaScript string).
– thor2k
Sep 1 '16 at 15:03
How are you adding the text? When are you trying to get the count? Make sure to trigger the count after adding the initial text... How long is the text? There's no particular limit, but 64K is theorized as the limit. Also, make sure the maxLength attribute is not defined on your text area. Finally, this is pure JavaScript working on any JavaScript string, it just so happens that the OP wanted to apply to the text area's value (a JavaScript string).
– thor2k
Sep 1 '16 at 15:03
add a comment |
up vote
41
down vote
The problem with using "n" or "r" is it only counts the number of returns, if you have a line that is long it could wrap and then it wouldn't be counted as a new line. This is an alternative way to get the number of lines - so it may not be the best way.
Edit (thanks alex):
Script
$(document).ready(function(){
var lht = parseInt($('textarea').css('lineHeight'),10);
var lines = $('textarea').attr('scrollHeight') / lht;
console.log(lines);
})
Update: There is a much more thorough answer here: https://stackoverflow.com/a/1761203/145346
edited May 23 '17 at 12:26
Community♦
11
answered Jan 10 '10 at 7:32
Mottie
55k18105204
2
you could lessen maintenance with `var lineheight = $('textarea#my-textarea').css('line-height');
– alex
Jan 10 '10 at 8:53
1
That doesn't seem to return the correct line height, you have to set it.
– Mottie
Jan 10 '10 at 16:09
4
I think you need to replaceattrwithprop, at leastattrdidn't work for me, it returned undefined every time...
– webeno
Mar 30 '14 at 21:30
4
@webeno it depends on the version of jQuery that you use. As of jQuery v1.6, you need to useprop()instead ofattr()(ref)
– Mottie
Mar 31 '14 at 12:14
6
This example doesn't take padding in consideration. When adding padding, I get the correct number:var padding = parseInt($('textarea').css('paddingTop'),10) + parseInt($('textarea').css('paddingBottom'),10) var lines = ($('textarea').prop('scrollHeight') - padding) / lineheight;
– dnlmzw
Jan 2 '15 at 13:13
|
show 4 more comments
up vote
41
down vote
The problem with using "n" or "r" is it only counts the number of returns, if you have a line that is long it could wrap and then it wouldn't be counted as a new line. This is an alternative way to get the number of lines - so it may not be the best way.
Edit (thanks alex):
Script
$(document).ready(function(){
var lht = parseInt($('textarea').css('lineHeight'),10);
var lines = $('textarea').attr('scrollHeight') / lht;
console.log(lines);
})
Update: There is a much more thorough answer here: https://stackoverflow.com/a/1761203/145346
edited May 23 '17 at 12:26
Community♦
11
answered Jan 10 '10 at 7:32
Mottie
55k18105204
2
you could lessen maintenance with `var lineheight = $('textarea#my-textarea').css('line-height');
– alex
Jan 10 '10 at 8:53
1
That doesn't seem to return the correct line height, you have to set it.
– Mottie
Jan 10 '10 at 16:09
4
I think you need to replaceattrwithprop, at leastattrdidn't work for me, it returned undefined every time...
– webeno
Mar 30 '14 at 21:30
4
@webeno it depends on the version of jQuery that you use. As of jQuery v1.6, you need to useprop()instead ofattr()(ref)
– Mottie
Mar 31 '14 at 12:14
6
This example doesn't take padding in consideration. When adding padding, I get the correct number:var padding = parseInt($('textarea').css('paddingTop'),10) + parseInt($('textarea').css('paddingBottom'),10) var lines = ($('textarea').prop('scrollHeight') - padding) / lineheight;
– dnlmzw
Jan 2 '15 at 13:13
|
show 4 more comments
up vote
41
down vote
up vote
41
down vote
The problem with using "n" or "r" is it only counts the number of returns, if you have a line that is long it could wrap and then it wouldn't be counted as a new line. This is an alternative way to get the number of lines - so it may not be the best way.
Edit (thanks alex):
Script
$(document).ready(function(){
var lht = parseInt($('textarea').css('lineHeight'),10);
var lines = $('textarea').attr('scrollHeight') / lht;
console.log(lines);
})
Update: There is a much more thorough answer here: https://stackoverflow.com/a/1761203/145346
edited May 23 '17 at 12:26
Community♦
11
answered Jan 10 '10 at 7:32
Mottie
55k18105204
The problem with using "n" or "r" is it only counts the number of returns, if you have a line that is long it could wrap and then it wouldn't be counted as a new line. This is an alternative way to get the number of lines - so it may not be the best way.
Edit (thanks alex):
Script
$(document).ready(function(){
var lht = parseInt($('textarea').css('lineHeight'),10);
var lines = $('textarea').attr('scrollHeight') / lht;
console.log(lines);
})
Update: There is a much more thorough answer here: https://stackoverflow.com/a/1761203/145346
edited May 23 '17 at 12:26
Community♦
11
answered Jan 10 '10 at 7:32
Mottie
55k18105204
edited May 23 '17 at 12:26
Community♦
11
edited May 23 '17 at 12:26
Community♦
11
edited May 23 '17 at 12:26
Community♦
11
11
answered Jan 10 '10 at 7:32
Mottie
55k18105204
answered Jan 10 '10 at 7:32
Mottie
55k18105204
answered Jan 10 '10 at 7:32
Mottie
55k18105204
55k18105204
2
you could lessen maintenance with `var lineheight = $('textarea#my-textarea').css('line-height');
– alex
Jan 10 '10 at 8:53
1
That doesn't seem to return the correct line height, you have to set it.
– Mottie
Jan 10 '10 at 16:09
4
I think you need to replaceattrwithprop, at leastattrdidn't work for me, it returned undefined every time...
– webeno
Mar 30 '14 at 21:30
4
@webeno it depends on the version of jQuery that you use. As of jQuery v1.6, you need to useprop()instead ofattr()(ref)
– Mottie
Mar 31 '14 at 12:14
6
This example doesn't take padding in consideration. When adding padding, I get the correct number:var padding = parseInt($('textarea').css('paddingTop'),10) + parseInt($('textarea').css('paddingBottom'),10) var lines = ($('textarea').prop('scrollHeight') - padding) / lineheight;
– dnlmzw
Jan 2 '15 at 13:13
|
show 4 more comments
2
you could lessen maintenance with `var lineheight = $('textarea#my-textarea').css('line-height');
– alex
Jan 10 '10 at 8:53
1
That doesn't seem to return the correct line height, you have to set it.
– Mottie
Jan 10 '10 at 16:09
4
I think you need to replaceattrwithprop, at leastattrdidn't work for me, it returned undefined every time...
– webeno
Mar 30 '14 at 21:30
4
@webeno it depends on the version of jQuery that you use. As of jQuery v1.6, you need to useprop()instead ofattr()(ref)
– Mottie
Mar 31 '14 at 12:14
6
This example doesn't take padding in consideration. When adding padding, I get the correct number:var padding = parseInt($('textarea').css('paddingTop'),10) + parseInt($('textarea').css('paddingBottom'),10) var lines = ($('textarea').prop('scrollHeight') - padding) / lineheight;
– dnlmzw
Jan 2 '15 at 13:13
2
2
you could lessen maintenance with `var lineheight = $('textarea#my-textarea').css('line-height');
– alex
Jan 10 '10 at 8:53
you could lessen maintenance with `var lineheight = $('textarea#my-textarea').css('line-height');
– alex
Jan 10 '10 at 8:53
1
1
That doesn't seem to return the correct line height, you have to set it.
– Mottie
Jan 10 '10 at 16:09
That doesn't seem to return the correct line height, you have to set it.
– Mottie
Jan 10 '10 at 16:09
4
4
I think you need to replace
attr with prop, at least attr didn't work for me, it returned undefined every time...– webeno
Mar 30 '14 at 21:30
I think you need to replace
attr with prop, at least attr didn't work for me, it returned undefined every time...– webeno
Mar 30 '14 at 21:30
4
4
@webeno it depends on the version of jQuery that you use. As of jQuery v1.6, you need to use
prop() instead of attr() (ref)– Mottie
Mar 31 '14 at 12:14
@webeno it depends on the version of jQuery that you use. As of jQuery v1.6, you need to use
prop() instead of attr() (ref)– Mottie
Mar 31 '14 at 12:14
6
6
This example doesn't take padding in consideration. When adding padding, I get the correct number:
var padding = parseInt($('textarea').css('paddingTop'),10) + parseInt($('textarea').css('paddingBottom'),10) var lines = ($('textarea').prop('scrollHeight') - padding) / lineheight;– dnlmzw
Jan 2 '15 at 13:13
This example doesn't take padding in consideration. When adding padding, I get the correct number:
var padding = parseInt($('textarea').css('paddingTop'),10) + parseInt($('textarea').css('paddingBottom'),10) var lines = ($('textarea').prop('scrollHeight') - padding) / lineheight;– dnlmzw
Jan 2 '15 at 13:13
|
show 4 more comments
up vote
23
down vote
If you are just wanting to test hard line returns, this will work cross platform:
var text = $("#myTextArea").val();
var lines = text.split(/r|rn|n/);
var count = lines.length;
console.log(count); // Outputs 4
answered Jan 10 '10 at 2:58
Doug Neiner
55.1k1198114
add a comment |
up vote
23
down vote
If you are just wanting to test hard line returns, this will work cross platform:
var text = $("#myTextArea").val();
var lines = text.split(/r|rn|n/);
var count = lines.length;
console.log(count); // Outputs 4
answered Jan 10 '10 at 2:58
Doug Neiner
55.1k1198114
add a comment |
up vote
23
down vote
up vote
23
down vote
If you are just wanting to test hard line returns, this will work cross platform:
var text = $("#myTextArea").val();
var lines = text.split(/r|rn|n/);
var count = lines.length;
console.log(count); // Outputs 4
answered Jan 10 '10 at 2:58
Doug Neiner
55.1k1198114
If you are just wanting to test hard line returns, this will work cross platform:
var text = $("#myTextArea").val();
var lines = text.split(/r|rn|n/);
var count = lines.length;
console.log(count); // Outputs 4
answered Jan 10 '10 at 2:58
Doug Neiner
55.1k1198114
answered Jan 10 '10 at 2:58
Doug Neiner
55.1k1198114
answered Jan 10 '10 at 2:58
Doug Neiner
55.1k1198114
answered Jan 10 '10 at 2:58
Doug Neiner
55.1k1198114
55.1k1198114
add a comment |
add a comment |
up vote
8
down vote
user n instead of r
var text = $("#myTextArea").val();
var lines = text.split("n");
var count = lines.length;
console.log(count);
answered Jan 10 '10 at 2:56
Marek Karbarz
24.5k64572
add a comment |
up vote
8
down vote
user n instead of r
var text = $("#myTextArea").val();
var lines = text.split("n");
var count = lines.length;
console.log(count);
answered Jan 10 '10 at 2:56
Marek Karbarz
24.5k64572
add a comment |
up vote
8
down vote
up vote
8
down vote
user n instead of r
var text = $("#myTextArea").val();
var lines = text.split("n");
var count = lines.length;
console.log(count);
answered Jan 10 '10 at 2:56
Marek Karbarz
24.5k64572
user n instead of r
var text = $("#myTextArea").val();
var lines = text.split("n");
var count = lines.length;
console.log(count);
answered Jan 10 '10 at 2:56
Marek Karbarz
24.5k64572
answered Jan 10 '10 at 2:56
Marek Karbarz
24.5k64572
answered Jan 10 '10 at 2:56
Marek Karbarz
24.5k64572
answered Jan 10 '10 at 2:56
Marek Karbarz
24.5k64572
24.5k64572
add a comment |
add a comment |
up vote
2
down vote
What about splitting on "n" instead?
It will also be a problem where one line wrapped to 2 lines in the textarea.
To do it accurately like this, you could use a fixed height font and measure pixels. This could be problematic though.
answered Jan 10 '10 at 2:54
alex
335k166761910
2
ouch...................!
– alex
Jan 10 '10 at 3:04
It's not that bad... I used this method in my answer.
– Mottie
Jan 10 '10 at 7:35
add a comment |
up vote
2
down vote
What about splitting on "n" instead?
It will also be a problem where one line wrapped to 2 lines in the textarea.
To do it accurately like this, you could use a fixed height font and measure pixels. This could be problematic though.
answered Jan 10 '10 at 2:54
alex
335k166761910
2
ouch...................!
– alex
Jan 10 '10 at 3:04
It's not that bad... I used this method in my answer.
– Mottie
Jan 10 '10 at 7:35
add a comment |
up vote
2
down vote
up vote
2
down vote
What about splitting on "n" instead?
It will also be a problem where one line wrapped to 2 lines in the textarea.
To do it accurately like this, you could use a fixed height font and measure pixels. This could be problematic though.
answered Jan 10 '10 at 2:54
alex
335k166761910
What about splitting on "n" instead?
It will also be a problem where one line wrapped to 2 lines in the textarea.
To do it accurately like this, you could use a fixed height font and measure pixels. This could be problematic though.
answered Jan 10 '10 at 2:54
alex
335k166761910
answered Jan 10 '10 at 2:54
alex
335k166761910
answered Jan 10 '10 at 2:54
alex
335k166761910
answered Jan 10 '10 at 2:54
alex
335k166761910
335k166761910
2
ouch...................!
– alex
Jan 10 '10 at 3:04
It's not that bad... I used this method in my answer.
– Mottie
Jan 10 '10 at 7:35
add a comment |
2
ouch...................!
– alex
Jan 10 '10 at 3:04
It's not that bad... I used this method in my answer.
– Mottie
Jan 10 '10 at 7:35
2
2
ouch...................!
– alex
Jan 10 '10 at 3:04
ouch...................!
– alex
Jan 10 '10 at 3:04
It's not that bad... I used this method in my answer.
– Mottie
Jan 10 '10 at 7:35
It's not that bad... I used this method in my answer.
– Mottie
Jan 10 '10 at 7:35
add a comment |
up vote
2
down vote
This function counts the number of lines which have text in a textarea:
function countLine(element) {
var text = $(element).val();
var lines = text.split("n");
var count = 0;
for (var i = 0; i < lines.length-1; i++) {
if (lines[i].trim()!="" && lines[i].trim()!=null) {
count += 1;
}
}
return count;
}
edited Mar 11 '15 at 11:41
AJPerez
2,21484262
answered Mar 11 '15 at 10:55
Tran Duy
211
add a comment |
up vote
2
down vote
This function counts the number of lines which have text in a textarea:
function countLine(element) {
var text = $(element).val();
var lines = text.split("n");
var count = 0;
for (var i = 0; i < lines.length-1; i++) {
if (lines[i].trim()!="" && lines[i].trim()!=null) {
count += 1;
}
}
return count;
}
edited Mar 11 '15 at 11:41
AJPerez
2,21484262
answered Mar 11 '15 at 10:55
Tran Duy
211
add a comment |
up vote
2
down vote
up vote
2
down vote
This function counts the number of lines which have text in a textarea:
function countLine(element) {
var text = $(element).val();
var lines = text.split("n");
var count = 0;
for (var i = 0; i < lines.length-1; i++) {
if (lines[i].trim()!="" && lines[i].trim()!=null) {
count += 1;
}
}
return count;
}
edited Mar 11 '15 at 11:41
AJPerez
2,21484262
answered Mar 11 '15 at 10:55
Tran Duy
211
This function counts the number of lines which have text in a textarea:
function countLine(element) {
var text = $(element).val();
var lines = text.split("n");
var count = 0;
for (var i = 0; i < lines.length-1; i++) {
if (lines[i].trim()!="" && lines[i].trim()!=null) {
count += 1;
}
}
return count;
}
edited Mar 11 '15 at 11:41
AJPerez
2,21484262
answered Mar 11 '15 at 10:55
Tran Duy
211
edited Mar 11 '15 at 11:41
AJPerez
2,21484262
edited Mar 11 '15 at 11:41
AJPerez
2,21484262
edited Mar 11 '15 at 11:41
AJPerez
2,21484262
2,21484262
answered Mar 11 '15 at 10:55
Tran Duy
211
answered Mar 11 '15 at 10:55
Tran Duy
211
answered Mar 11 '15 at 10:55
Tran Duy
211
211
add a comment |
add a comment |
up vote
1
down vote
The normal newline character is "n". The convention on some systems is to also have "r" beforehand, so on these systems "rn" is often found to mean a new line. In a browser, unless the user intentionally enters a "r" by copying it from somewhere else, the newline will probably be expressed as just "n". In either case splitting by "n" will count the number of lines.
answered Jan 10 '10 at 2:58
Danny Roberts
2,3801726
add a comment |
up vote
1
down vote
The normal newline character is "n". The convention on some systems is to also have "r" beforehand, so on these systems "rn" is often found to mean a new line. In a browser, unless the user intentionally enters a "r" by copying it from somewhere else, the newline will probably be expressed as just "n". In either case splitting by "n" will count the number of lines.
answered Jan 10 '10 at 2:58
Danny Roberts
2,3801726
add a comment |
up vote
1
down vote
up vote
1
down vote
The normal newline character is "n". The convention on some systems is to also have "r" beforehand, so on these systems "rn" is often found to mean a new line. In a browser, unless the user intentionally enters a "r" by copying it from somewhere else, the newline will probably be expressed as just "n". In either case splitting by "n" will count the number of lines.
answered Jan 10 '10 at 2:58
Danny Roberts
2,3801726
The normal newline character is "n". The convention on some systems is to also have "r" beforehand, so on these systems "rn" is often found to mean a new line. In a browser, unless the user intentionally enters a "r" by copying it from somewhere else, the newline will probably be expressed as just "n". In either case splitting by "n" will count the number of lines.
answered Jan 10 '10 at 2:58
Danny Roberts
2,3801726
answered Jan 10 '10 at 2:58
Danny Roberts
2,3801726
answered Jan 10 '10 at 2:58
Danny Roberts
2,3801726
answered Jan 10 '10 at 2:58
Danny Roberts
2,3801726
2,3801726
add a comment |
add a comment |
up vote
1
down vote
I've used the original answer of Mottie but some functions were changed in the JQuery API. Here is the working function for the current API v3.1.0:
var lht = parseInt($('#textarea').css('lineHeight'),10);
var lines = $('#textarea').prop('scrollHeight') / lht;
console.log(lines);
All tumbs up for Mottie's answer!
answered Aug 11 '16 at 13:26
Quispie
6201123
add a comment |
up vote
1
down vote
I've used the original answer of Mottie but some functions were changed in the JQuery API. Here is the working function for the current API v3.1.0:
var lht = parseInt($('#textarea').css('lineHeight'),10);
var lines = $('#textarea').prop('scrollHeight') / lht;
console.log(lines);
All tumbs up for Mottie's answer!
answered Aug 11 '16 at 13:26
Quispie
6201123
add a comment |
up vote
1
down vote
up vote
1
down vote
I've used the original answer of Mottie but some functions were changed in the JQuery API. Here is the working function for the current API v3.1.0:
var lht = parseInt($('#textarea').css('lineHeight'),10);
var lines = $('#textarea').prop('scrollHeight') / lht;
console.log(lines);
All tumbs up for Mottie's answer!
answered Aug 11 '16 at 13:26
Quispie
6201123
I've used the original answer of Mottie but some functions were changed in the JQuery API. Here is the working function for the current API v3.1.0:
var lht = parseInt($('#textarea').css('lineHeight'),10);
var lines = $('#textarea').prop('scrollHeight') / lht;
console.log(lines);
All tumbs up for Mottie's answer!
answered Aug 11 '16 at 13:26
Quispie
6201123
answered Aug 11 '16 at 13:26
Quispie
6201123
answered Aug 11 '16 at 13:26
Quispie
6201123
answered Aug 11 '16 at 13:26
Quispie
6201123
6201123
add a comment |
add a comment |
up vote
1
down vote
However this is working if you need use it because it respond to your problem
let text = document.getElementById("myTextarea").value;
let lines = text.split(/r|rn|n/);
let count = lines.length;
console.log(count);
answered May 15 '17 at 13:14
Ir Calif
14416
add a comment |
up vote
1
down vote
However this is working if you need use it because it respond to your problem
let text = document.getElementById("myTextarea").value;
let lines = text.split(/r|rn|n/);
let count = lines.length;
console.log(count);
answered May 15 '17 at 13:14
Ir Calif
14416
add a comment |
up vote
1
down vote
up vote
1
down vote
However this is working if you need use it because it respond to your problem
let text = document.getElementById("myTextarea").value;
let lines = text.split(/r|rn|n/);
let count = lines.length;
console.log(count);
answered May 15 '17 at 13:14
Ir Calif
14416
However this is working if you need use it because it respond to your problem
let text = document.getElementById("myTextarea").value;
let lines = text.split(/r|rn|n/);
let count = lines.length;
console.log(count);
answered May 15 '17 at 13:14
Ir Calif
14416
answered May 15 '17 at 13:14
Ir Calif
14416
answered May 15 '17 at 13:14
Ir Calif
14416
answered May 15 '17 at 13:14
Ir Calif
14416
14416
add a comment |
add a comment |
up vote
0
down vote
<html>
<head>
<script>
function countLines(theArea){
var theLines = theArea.value.replace((new RegExp(".{"+theArea.cols+"}","g")),"n").split("n");
if(theLines[theLines.length-1]=="") theLines.length--;
theArea.form.lineCount.value = theLines.length;
}
</script>
</head>
<body>
<form>
<textarea name="myText" onKeyUp="countLines(this)" cols="10" rows="10">
</textarea>
<br>
Lines:
<input type=text name="lineCount" size="2" value="0">
</form>
</body>
</html>
answered May 3 '14 at 18:00
humo
84
add a comment |
up vote
0
down vote
<html>
<head>
<script>
function countLines(theArea){
var theLines = theArea.value.replace((new RegExp(".{"+theArea.cols+"}","g")),"n").split("n");
if(theLines[theLines.length-1]=="") theLines.length--;
theArea.form.lineCount.value = theLines.length;
}
</script>
</head>
<body>
<form>
<textarea name="myText" onKeyUp="countLines(this)" cols="10" rows="10">
</textarea>
<br>
Lines:
<input type=text name="lineCount" size="2" value="0">
</form>
</body>
</html>
answered May 3 '14 at 18:00
humo
84
add a comment |
up vote
0
down vote
up vote
0
down vote
<html>
<head>
<script>
function countLines(theArea){
var theLines = theArea.value.replace((new RegExp(".{"+theArea.cols+"}","g")),"n").split("n");
if(theLines[theLines.length-1]=="") theLines.length--;
theArea.form.lineCount.value = theLines.length;
}
</script>
</head>
<body>
<form>
<textarea name="myText" onKeyUp="countLines(this)" cols="10" rows="10">
</textarea>
<br>
Lines:
<input type=text name="lineCount" size="2" value="0">
</form>
</body>
</html>
answered May 3 '14 at 18:00
humo
84
<html>
<head>
<script>
function countLines(theArea){
var theLines = theArea.value.replace((new RegExp(".{"+theArea.cols+"}","g")),"n").split("n");
if(theLines[theLines.length-1]=="") theLines.length--;
theArea.form.lineCount.value = theLines.length;
}
</script>
</head>
<body>
<form>
<textarea name="myText" onKeyUp="countLines(this)" cols="10" rows="10">
</textarea>
<br>
Lines:
<input type=text name="lineCount" size="2" value="0">
</form>
</body>
</html>
answered May 3 '14 at 18:00
humo
84
answered May 3 '14 at 18:00
humo
84
answered May 3 '14 at 18:00
humo
84
answered May 3 '14 at 18:00
humo
84
84
add a comment |
add a comment |
up vote
0
down vote
Your ans can be done in very simple way.
var text = $("#myTextArea").val();
// will remove the blank lines from the text-area
text = text.replace(/^s*[rn]/gm, "");
//It will split when new lines enter
var lines = text.split(/r|rn|n/);
var count = lines.length; //now you can count thses lines.
console.log(count);
This code for exact lines filled in the textarea.
and will work for sure.
answered Sep 21 '17 at 6:08
Bachas
6119
add a comment |
up vote
0
down vote
Your ans can be done in very simple way.
var text = $("#myTextArea").val();
// will remove the blank lines from the text-area
text = text.replace(/^s*[rn]/gm, "");
//It will split when new lines enter
var lines = text.split(/r|rn|n/);
var count = lines.length; //now you can count thses lines.
console.log(count);
This code for exact lines filled in the textarea.
and will work for sure.
answered Sep 21 '17 at 6:08
Bachas
6119
add a comment |
up vote
0
down vote
up vote
0
down vote
Your ans can be done in very simple way.
var text = $("#myTextArea").val();
// will remove the blank lines from the text-area
text = text.replace(/^s*[rn]/gm, "");
//It will split when new lines enter
var lines = text.split(/r|rn|n/);
var count = lines.length; //now you can count thses lines.
console.log(count);
This code for exact lines filled in the textarea.
and will work for sure.
answered Sep 21 '17 at 6:08
Bachas
6119
Your ans can be done in very simple way.
var text = $("#myTextArea").val();
// will remove the blank lines from the text-area
text = text.replace(/^s*[rn]/gm, "");
//It will split when new lines enter
var lines = text.split(/r|rn|n/);
var count = lines.length; //now you can count thses lines.
console.log(count);
This code for exact lines filled in the textarea.
and will work for sure.
answered Sep 21 '17 at 6:08
Bachas
6119
answered Sep 21 '17 at 6:08
Bachas
6119
answered Sep 21 '17 at 6:08
Bachas
6119
answered Sep 21 '17 at 6:08
Bachas
6119
6119
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f2035910%2fhow-to-get-the-number-of-lines-in-a-textarea%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
