Getting Line Number In Text Area

Question

Possible Duplicate:
Find out the 'line' (row) number of the cursor in a textarea

I want to find out the line number that a user's cursor in on in a HTML textarea element.

Is this possible using javascript and jquery?

Define lines in a textarea. Does it include wrapped text or do you only want to consider newlines? — zeebonk, Sep 23 '12 at 14:15
I want to set 15 character limit in one line and user should not be able to enter more than 75 chars in 5 lines — Freelancer, Sep 23 '12 at 14:17

score 19 · Accepted Answer · edited May 23 '17 at 11:46

19

This works with button click. Stolen from Find out the 'line' (row) number of the cursor in a textarea

function getline()
{
    var t = $("#t")[0];
    alert(t.value.substr(0, t.selectionStart).split("\n").length);
}

HTML

<textarea rows="6" id="t">
there is no
love in the ghetto
so come here
and get it
</textarea>
<input type="button" onclick="getline()" value="get line" />

edited May 23 '17 at 11:46

Community

1
1

answered Sep 23 '12 at 14:27

codingbiz

26,179
8
59
96

4

This does not account for linebreaks caused by word wrapping. – Rob W Sep 23 '12 at 14:31
4

@RobW: I don't think the OP needs that – Bergi Sep 23 '12 at 14:33
It worked for me...Its helpfull – Freelancer Sep 23 '12 at 14:35
@codingbiz: it was so perfect...i just copy and pasted it...and it has worked...i was in this problem for past 1 week...but i have released now....thank u.. – Freelancer Sep 24 '12 at 02:20
@freelance Celebrate your luck – codingbiz Sep 26 '12 at 23:36
@codingbiz: sir, will you please look at below link. http://stackoverflow.com/questions/12600626/memory-corrupt-error – Freelancer Sep 27 '12 at 02:47
check this link http://stackoverflow.com/questions/596413/attempted-to-read-or-write-protected-memory. what are you doing with oledb? can you change it to an alternative. Read the link first – codingbiz Sep 27 '12 at 06:54

score 1 · Answer 2 · edited May 23 '17 at 12:09

1

You can use the following approach

Find the caret position (index).
Find the substring from position 0 to index
Search for number of new lines in the substring obtained in step 2.

// Test

$(function() {
    $('#test').keyup(function() {
        var pos = 0;
        if (this.selectionStart) {
            pos = this.selectionStart;
        } else if (document.selection) {
            this.focus();

            var r = document.selection.createRange();
            if (r == null) {
                pos = 0;
            } else {

                var re = this.createTextRange(),
                rc = re.duplicate();
                re.moveToBookmark(r.getBookmark());
                rc.setEndPoint('EndToStart', re);

                pos = rc.text.length;
            }
        }
        $('#c').html(this.value.substr(0, pos).split("\n").length);
    });
});

Here is a working example http://jsfiddle.net/S2yn3/1/

edited May 23 '17 at 12:09

Community

1
1

answered Sep 23 '12 at 14:16

Joyce Babu

19,602
13
62
97

What about lines caused by linebreaks? – Frederik Voordeckers Jun 27 '14 at 11:15
Did you mean wordwrap? – Joyce Babu Jun 27 '14 at 11:24
Yes, linebreaks caused by wordwrapping... – Frederik Voordeckers Jun 28 '14 at 11:28
It is difficult to detect linebreaks caused by wordwrapping, unless you are using a fixed width font. – Joyce Babu Jul 01 '14 at 10:14

score 1 · Answer 3 · edited May 23 '17 at 12:32

This can be split up in three steps:

Caret position in textarea, in characters from the start
How to get the number of lines in a textarea? / JavaScript: How to add line breaks to an HTML textarea?
get the lines before the caret, and count them.

I guess you don't want to consider wrapped text and scrolled content. Assuming you use the function from this answer, it would be like:

var el = document.getElementById("inputarea"); // or something

var pos = getCaret(el),
    before = el.value.substr(0, pos),
    lines = before.split(/\r?\n/);
return lines.length;

Getting Line Number In Text Area

3 Answers3

Linked