8

Given a textarea with content that flows like this

     ––––––––––––––––––––––––––
    | This is some text, which |
    | wraps like this.         |
     ––––––––––––––––––––––––––

How can one tell if the text-cursor is on the first line of the textarea?

Obviously, checking for a newline character (\n) works if one wants to see if the cursor appears before the first line break, but testing for a 'soft' line break seems more challenging.

Here is a sample jsFiddle to experiment with.

I have not yet come up with a strategy, but I suspect it may involve copying the text up until the cursor position into a cloned textarea (or div), and making the width as long as it needs to be so it doesn't wrap. If the cloned area has a width less than the original's width, then the cursor would seem to have to be on the first line. There may a simpler option, something more elegant, or (best of all) an existing and well-tested solution.

Target browsers are Webkit (Chrome/Safari) & Firefox. I.e. IE compatibility is not a concern at this time (if that makes any difference).

Thanks for reading.

EDIT: Seeking line number of text caret, not mouse cursor.

falsarella gave an excellent answer, that highlighted an ambiguity in the question. What I am seeking is whether the text cursor (“caret” may be a better word) is on the first line. I have updated the question and the jsFiddle to reflect.

falsarella
  • 12,217
  • 9
  • 69
  • 115
Brian M. Hunt
  • 81,008
  • 74
  • 230
  • 343
  • While searching on the SO I found these two questions which might be helpful to you, although not sure whether you've already seen them or not http://stackoverflow.com/questions/9370197/caret-position-cross-browser http://stackoverflow.com/questions/4928586/get-caret-position-in-html-input – Arnab Aug 07 '12 at 17:49
  • Ignore my previous comment please, I misunderstood the question – Arnab Aug 07 '12 at 17:55

2 Answers2

4

I only know of one "working method". The method requires use of textarea's "cols" attribute. Long story short, set the cols to the width you want, then divide the cursor position and floor it to see if it is less than 1, thus it = line 1!

Might be easier to explain if I just show you a code example.

$("textarea").live("keyup", function(e) {
    if ($("textarea").attr("cols")) {
        var cols = parseInt($("textarea").attr("cols")),
            curPos = $('textarea').prop("selectionStart"),
            result = Math.floor(curPos/cols);
        var msg = (result < 1) ? "Cursor is on the First line!" : "Cursor is on the line #"+(result+1);
        console.log($("p").text(msg).text());
    };
});​

however, this may still require some wired math as some col sizes may still say "line 2" when the cursor is simply at the END of line one (which technically would still be right since any character would drop to line 2)

jsFiddle

SpYk3HH
  • 22,272
  • 11
  • 70
  • 81
  • Thanks SpYk3HH. This is interesting, though the math seems to not be working correctly in the jsFiddle. – Brian M. Hunt Aug 07 '12 at 18:46
  • Yea, I did notice one issue, in that if the chars don't go near end of line u get a misread, i'm thinking, get back to this shortly ... – SpYk3HH Aug 07 '12 at 19:07
  • Nice solution, I didn't know the selectionStart property. BTW, it is not treating enter characters! – falsarella Aug 07 '12 at 19:35
3

Having that 15 is the line height, this works (tested in firefox):

http://jsfiddle.net/h46jh/12/

$("textarea").click(function (evt) {
  cursor_position = evt.pageY - $('textarea').offset().top;
  if (cursor_position <= 15) {
    alert("first line");
  } else {
    alert("other line");
  }
});

Credits:

Find mouse position relative to element

Community
  • 1
  • 1
falsarella
  • 12,217
  • 9
  • 69
  • 115
  • This is an excellent solution, but I was looking for the text cursor, not the mouse cursor! I'm sorry - this is my fault, my question was unnecessarily ambiguous! – Brian M. Hunt Aug 07 '12 at 18:38