0

Please note the difference of a line wrap and a line break. Example: 

<!DOCTYPE html>
    <html>
        <body>
            <form action="/action_page.php">
                <textarea rows="2" cols="20" name="usrtxt" wrap="soft">
                    I'am only one line without line breaks. Look joe I don't break but I wrap.
                </textarea>
                <input type="submit">
            </form>
        </body>
    </html>

https://jsfiddle.net/b5dtjvbo/1/

I want to know if the cursor is in the first or last line. Like at the top or bottom of the textarea.

Nicomedes E.
  • 1,326
  • 5
  • 18
  • 27
Miso
  • 49
  • 7

3 Answers3

2

Is the only solution to do pixel measuring of the textarea and than count how much letters would fit in those pixel-width ??

Miso
  • 49
  • 7
  • The problem with this is word-wrapping, which you also need to account for. Not every line will break at the same number of characters. – user1280483 Sep 22 '22 at 19:26
1

you can do similar to this with this you can get position of mouse 

var indicator = document.getElementById("indicator");
var textarea = document.getElementById("textarea");
     
     setInterval(function() { 
     indicator.value = caret(textarea);
     }, 100);
  
    
    function caret(node) {
    if(node.selectionStart) return node.selectionStart;
     else if(!document.selection) return 0;
     var c  = "\001";
     var sel = document.selection.createRange();
     var dul = sel.duplicate();
     var len = 0;
     dul.moveToElementText(node);
     sel.text = c;
     len  = (dul.text.indexOf(c));
     sel.moveStart('character',-1);
     sel.text = "";
     return len;
    }
<textarea id="textarea" style="width:80%;height:100px;">
I'am only one line without line breaks. Look joe I don't break but I wrap.
</textarea><br>
<input type="text" id="indicator" style="width:25px;">
v8-E
  • 1,077
  • 2
  • 14
  • 21
  • 1
    I need more than mouse position. Thank you – Miso Apr 26 '18 at 07:22
  • more ?? If you are asking about adding more lines and getting position just try it will work. this just example,what you want to do after getting Position ? – v8-E Apr 26 '18 at 09:23
  • Read the title @v8 – Miso Apr 26 '18 at 12:01
  • this possibly will go in chat,You can do one thing provide fixed size Text are and then use above code to know position, Dont know what is your requirement but you can do this. Best example is STACK OVERFLOW's Comment section it allows you to enter limited characters :) – v8-E Apr 27 '18 at 03:40
  • thanks, but I guess it's not possible because I cant limit the text and I it's supposed to work in every possible textarea. Like with scrollbar, without, every size. My req is to be able to jump via predefined keyboard shortcuts out of the textarea. When in first line jump dirctly out when pressin arrow up for example – Miso Apr 27 '18 at 07:01
  • lets have chat will help you if you want,we can move this to chat session on Stack ,if you want? – v8-E Apr 27 '18 at 07:07
  • I don't have enough reputation points to enter the chat as it seems – Miso May 02 '18 at 10:54
0

Pls refer following snippet,

    <html>
    <head>
    <script>
        function f1(el) {
        var val = el.value;
        var position=val.slice(0,el.selectionStart).length;
        //  alert(position)
        if(parseInt(position)>=0 && parseInt(position)<=18)
          alert("cursor is on top line")
        else if(parseInt(position)>=19 && parseInt(position)<=39)
          alert("cursor is on middle line")
        else
          alert("cursor is on last line")


    }
    </script>
    </head>
    <body>

<textarea rows="2" cols="20" id='t1' name="usrtxt" wrap="soft" onclick="f1(document.getElementById('t1'))">
I'am only one line without line breaks. Look joe I don't break but I wrap.
</textarea>


</body>
    </html>

My edited answer ........

I am try to get position dynamically after adding more lines

For that purpose I refer https://github.com/component/textarea-caret-position this url, and modify original source code

Please refer following jsfiddle https://jsfiddle.net/6u1gwfeh/1/

hope this meet your requirement !!

Abhijeet Kale
  • 379
  • 3
  • 13